JavaScript模板字符串用法实例

目录
  • 1. 什么是模板字符串 ?
  • 2. 模板字符串的用法
  • 3. 模板字符串标签函数
  • 补充:JS模板字符串拼接
  • 总结

1. 什么是模板字符串 ?

模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能)

它的写法,以反引号 ` 开头,以反引号 ` 结尾

let str = `这是一个模板字符串`;

2. 模板字符串的用法

它与一般字符串不同,会保留空格,换行符和缩进

const str = `第一      行
第二行
	第三行`
console.log(str);

它还可以进行字符串插值,即将其它值插入到字符串中

字符串插值的写法:

  一个美元符号,花括号 ${val}val写想插入的值

let name = 'XiXiHaHa', age = 18;
let sayHello = `Hello! My name is ${name}.
My age is ${age}.`
console.log(sayHello);

3. 模板字符串标签函数

通过标签函数可以自定义插值行为
(标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关)

例如:

let a = 1, b = 2;
//strings:字符串数组---以${}分分隔符分割得到的数组
//aVal:模板字符串中第一个${}的值
//bVal:模板字符串中第二个${}的值
//abSum:模板字符串中第三个${}的值
function addSum(strings, aVal, bVal, abSum) {
    console.log(strings);
    console.log(aVal);
    console.log(bVal);
    console.log(abSum);
}
let abSum = addSum`${a} + ${b} = ${a + b}`;

让我们通过一个例子来理解一下它的应用:

let a = 1, b = 2, c = 3;
// 由于参数不确定,可以使用剩余参数在这里
function addSum(strings, ...val) {
    return strings[0] +
    val.map((e, i) => `${e}${strings[i + 1]}`)
    .join('');
}

let abSum = addSum`${a} + ${b} = ${a + b}`;
console.log(abSum);

let abcSum = addSum`${a} + ${b} + ${c} = ${a + b + c}`;
console.log(abcSum);

补充:JS模板字符串拼接

$oss是main.js中定义好的,主要用于图片URL的拼接

Vue.prototype.$oss = {
  basicAddress: 'http://oss.bailimeijia.com'
}

1、在HTML中使用模板字符串拼接

<img class="img-circle" :src="$oss.basicAddress + '/' + businessorgData.idCardUrl1" style="width: 100px; height: 100px" />

2、在js中使用模板字符串拼接

data() {
    return {
      fileList: [{
        url:`${this.$oss.basicAddress}/FrIkEw2UlgTxcmNKjt7FxywVT-W4`,
      }]
    }
 },

3、其他模板字符串的使用

 $('#list').html(`
      <div id=sm_shop_tp>
        <p>商家名字:<span>XXX</span></p>
        <p>商家地址:<span>XXX</span></p>
        <p>商家联系方式:<span>XXX</span></p>
      </div>
  `);

如果使用模板字符串表示多行字符串,则所有的空格、缩进和换行都会被保留在输出中。

如果想把行首和行尾的换行、空格等去掉,则使用trim方法即可。

$('#list').html(`
    <div id=sm_shop_tp>
      <p>商家名字:<span>XXX</span></p>
      <p>商家地址:<span>XXX</span></p>
      <p>商家联系方式:<span>XXX</span></p>
    </div>
`.trim());

总结

到此这篇关于JavaScript模板字符串用法的文章就介绍到这了,更多相关JS模板字符串内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2022-11-09

详解JavaScript ES6中的模板字符串

在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

JS&nbsp;ES新特性&nbsp;模板字符串

目录 1.模板字符串是什么 2.多行模板字符串 2.1带表达式的模板字符串 3.带标签的模板字符串 4.原始字符串 5.判断是否包含某字符串 5.1includes()方法 5.2startsWith()方法 5.3endsWith()方法 1.模板字符串是什么 模板字符串( Template String )是增强版的字符串,使用反引号(```)来代替谱通字符串中的用双引号和单引号.它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 普通用法如下所示: // 使用 `

ES6新特性之字符串的扩展实例分析

本文实例讲述了ES6新特性之字符串的扩展.分享给大家供大家参考,具体如下: 一.ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 . charAt: 返回指定位置的字符. lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 . match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nul

Java8新特性之字符串去重介绍

8月19日,Oracle发布了JDK 8u20,JDK 8u20包含很多新特性,比如Java编译器更新.支持在运行时通过API来修改MinHeapFreeRatio和MaxHeapFreeRatio参数.新的GC调优指南文档.不过在众多新特性中,最令人期待的还属字符串去重(String Deduplication ).如何减少内存占用一直是一个永恒的话题,而在Java应用中,经常会看到String对象会占用应用30%的内存,它是Java中最常用的对象之一.新的字符串去重特性可以帮助减少应用中St

ES6(ECMAScript 6)新特性之模板字符串用法分析

本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

ES6新特性之变量和字符串用法示例

本文实例讲述了ES6新特性之变量和字符串用法.分享给大家供大家参考,具体如下: 一.变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中.(在ES5中是没有块的概念的). if(true){ let a=1; } console.log(a);//undifined 这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历: for(let i=0;i<list

Vue.js 2.5新特性介绍(推荐)

TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.2012年十月份,微软发布了首个公开版本的TypeScript,在2013年6月19日,微软发布了TypeScript 0.9的正式版本,到目前为止,TypeScript已发展到2.x版本 安装TypeScript 安装TypeScript主要有两种方式: 通过npm方式安装(Node.js包管理器) 安装TypeS

Node.js v8.0.0正式发布!看看带来了哪些主要新特性

前言 Node.js于5月30号在其官方博客上发布了Node.js v8.0.0.这一版本将成为当前的长期维护版本,从2017年10月开始到2019年12月31号.而Node.js v6.0.0将会在2018年4月进入维护模式,并于2019年4月结束. 最新发布的版本代号为Carbon,带来了很多重要的特性改进和一些全新的特性. 引入async_hooks模块 新引入实验性模块async_hooks(之前叫作async_wrap),它包含了一组用于诊断的API,开发人员可以用它监控Node.js

JS基于ES6新特性async await进行异步处理操作示例

本文实例讲述了JS基于ES6新特性async await进行异步处理操作.分享给大家供大家参考,具体如下: 我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点callback的写法了,那是相当恶心的,下面我就来讲一下如何使用ES6的新特性async await进行异步处理,使上述情况就好像写同步代码一样,首先我们先举个例子: 先写上json文件: c

详解c++11新特性之模板的改进

C++11关于模板有一些细节的改进: 模板的右尖括号 模板的别名 函数模板的默认模板参数 模板的右尖括号 C++11之前是不允许两个右尖括号出现的,会被认为是右移操作符,所以需要中间加个空格进行分割,避免发生编译错误. int main() { std::vector<std::vector<int>> a; // error std::vector<std::vector<int> > b; // ok } 这个我之前都不知道,我开始学编程的时候就已经是C

AngularJS 2.0新特性有哪些

AngularJS已然成为Web应用开发世界里最受欢迎的开源JavaScript框架.自成立以来,见证其成功的是惊人的经济增长以及团体的支持与采用--包括个人开发者.企业.社区. Angular已经变成一个构建复杂单页面应用的客户端MVW框架(Model-View-Whatever).它在应用测试和应用编写方面都扮演重要角色,同时简化了开发过程. Angular目前的版本为1.3,该版本稳定,并被谷歌(框架维护者)用于支持众多应用(据估计,在谷歌有超过1600个应用运行于Angular1.2或1