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模板字符串内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解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 ES新特性 模板字符串

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

  • JavaScript模板字符串用法实例

    JavaScript模板字符串用法实例

    目录 1. 什么是模板字符串 ? 2. 模板字符串的用法 3. 模板字符串标签函数 补充:JS模板字符串拼接 总结 1. 什么是模板字符串 ? 模板字符串:是允许嵌入表达式的字符串(可以使用多行字符串和字符串插值功能) 它的写法,以反引号 ` 开头,以反引号 ` 结尾 let str = `这是一个模板字符串`; 2. 模板字符串的用法 它与一般字符串不同,会保留空格,换行符和缩进 const str = `第一 行 第二行 第三行` console.log(str); 它还可以进行字符串插值,

  • JavaScript模板引擎用法实例

    本文实例讲述了JavaScript模板引擎用法.分享给大家供大家参考.具体如下: 这里介绍的这个模板引擎写得短小精悍,非常值得一看 tmpl.js文件如下: // Simple JavaScript Templating // John Resig - http://ejohn.org/ - MIT Licensed (function() { var cache = {}; this.tmpl = function tmpl(str, data) { // Figure out if we'r

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

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

  • JavaScript 截取字符串代码实例

    这篇文章主要介绍了JavaScript 截取字符串代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <script> $(document).ready(function () { //下标从0开始 let str = '123456789'; //使用一个参数 console.log(str.slice(3)) //从第4个字符开始,截取到最后个字符;返回"456789" console.log(str.

  • Python编程之字符串模板(Template)用法实例分析

    Python编程之字符串模板(Template)用法实例分析

    本文实例讲述了Python编程之字符串模板(Template)用法.分享给大家供大家参考,具体如下: #coding=utf8 ''''' 字符串格式化操作符,需要程序员明确转换类型参数, 比如到底是转成字符串.整数还是其他什么类型. 新式的字符串模板的优势是不用去记住所有相关细节, 而是像shell风格的脚本语言里面那样使用美元符号($). 由于新式的字符串引进Template对象, Template对象有两个方法:substitute().safe_substitute(). substit

  • JavaScript 扩展运算符用法实例小结【基于ES6】

    本文实例讲述了JavaScript 扩展运算符用法.分享给大家供大家参考,具体如下: 扩展运算符格式 扩展运算符格式很简单,就是三个点(-) 重点:需要ES6 语法支持 扩展运算符作用??? 扩展运算符允许一个表达式在期望多个参数(用于函数调用)或多个元素(用于数组字面量)或多个变量(用于解构赋值)的位置扩展. 1.将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. 创建一个数组middle ②. 创建第二个包含middle的数组 ③. 输出结果 var middle =

  • javascript闭包(Closure)用法实例简析

    本文实例讲述了javascript闭包(Closure)用法.分享给大家供大家参考,具体如下: closure被翻译成"闭包",感觉这东西被包装的太学术化.下面参考书本和网上资源简单探讨一下(理解不当之处务请留意). 1.什么是闭包 官方的回答:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 看了上面的定义,如果你不是高手,我坚信你会和我一样愤怒的质问:这tmd是人话吗? 要理解闭包,还是代码

  • javascript原型模式用法实例详解

    本文实例讲述了javascript原型模式用法.分享给大家供大家参考.具体分析如下: 一般在了解了工厂模式和构造函数模式的弊端之后,就知道为什么需要原型模式了   原型模式i的定义:每个函数都有一个prototype(原型)属性,这个属性是一个对象,它的用途是包含可以由特定类型的所有实例共享的属性和方法.比如在构造函数模型中sayInformation()方法,如果声明两个实例就要构造两次sayInformation方法,但是声明两次是没有必要的,这就是为什么有原型模式的出现(尼玛,网上那些博客

  • javascript中attachEvent用法实例分析

    本文实例讲述了javascript中attachEvent用法.分享给大家供大家参考.具体分析如下: 一般我们在JS中添加事件,是这样子的 obj.onclick=method 这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢? obj.onclick=method1 obj.onclick=method2 obj.onclick=method3 如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,

  • javascript中this用法实例详解

    本文实例讲述了javascript中this用法.分享给大家供大家参考,具体如下: JavaScript中的this含义非常丰富,它可以是全局对象,当前对象或者是任意对象,这都取决于函数的调用方式.函数有以下几种调用方式:作为对象方法调用.作为函数调用.作为构造函数调用.apply或call调用. 对象方法调用 作为对象方法调用的时候,this会被绑定到该对象. var point = { x : 0, y : 0, moveTo : function(x, y) { this.x = this

随机推荐