模板字面量 是允许嵌入表达式的字符串字面量。

你可以使用多行字符串字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

语法

  1. `string text`

    `string text line 1
    string text line 2`

    `string text ${expression} string text`

    tag `string text ${expression} string text`

描述

模板字符串使用反引号 () 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数,该函数负责将所有的部分连接起来,如果一个模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理。在模版字符串内使用反引号(`)时,需要在它前面加转义符(\)。

  1. `\`` === "`" // --> true

多行字符串

在新行中插入的任何字符都是模板字符串中的一部分,使用普通字符串,你可以通过以下的方式获得多行字符串:

  1. console.log('string text line 1\n' +
    'string text line 2');
    // "string text line 1
    // string text line 2"

要获得同样效果的多行字符串,只需使用如下代码:

  1. console.log(`string text line 1
    string text line 2`);
    // "string text line 1
    // string text line 2"

插入表达式

在普通字符串中嵌入表达式,必须使用如下语法:

  1. var a = 5;
    var b = 10;
    console.log('Fifteen is ' + (a + b) + ' and\nnot ' + (2 * a + b) + '.');
    // "Fifteen is 15 and
    // not 20."

现在通过模板字符串,我们可以使用一种更优雅的方式来表示:

  1. var a = 5;
    var b = 10;
    console.log(`Fifteen is ${a + b} and
    not ${2 * a + b}.`);
    // "Fifteen is 15 and
    // not 20."

嵌套模板

在某些时候,嵌套模板是具有可配置字符串的最简单也是更可读的方法。 在模板中,只需在模板内的占位符 ${ } 内使用它们,就可以轻松地使用内部反引号。 例如,如果条件 a 是真的,那么返回这个模板化的文字。

一个普通字符串例子:

  1. var classes = 'header'
    classes += (false ?
      '' : true ?
        ' icon-expander' : ' icon-collapser');

输出:header icon-expander

在ES2015中使用模板文字而没有嵌套:

  1. var classes = `header ${ false ? '' :
    (true ? 'icon-expander' : 'icon-collapser') }`;

输出:header icon-expander

在ES2015的嵌套模板字面量中:

  1. var classes = `header ${ false ? '' :
    `icon-${true ? 'icon-expander' : 'icon-collapser'}` }`;

输出:header icon-icon-expander

带标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后,你的函数可以返回处理好的的字符串(或者它可以返回完全不同的东西 , 如下个例子所述)。用于该标签的函数的名称可以被命名为任何名字。

  1. var person = 'Mike';
    var age = 28;

    function myTag(strings, personExp, ageExp) {

     var str0 = strings[0]; // "that "
     var str1 = strings[1]; // " is a "

     // There is technically a string after
     // the final expression (in our example),
     // but it is empty (""), so disregard.
     // var str2 = strings[2];

     var ageStr;
     if (ageExp > 99){
       ageStr = 'centenarian';
    } else {
       ageStr = 'youngster';
    }

     return str0 + personExp + str1 + ageStr;

    }

    var output = myTag`that ${ person } is a ${ age }`;

    console.log(output);
    // that Mike is a youngster

标签函数并不一定需要返回一个字符串。可以返回其他数据类型,比如数组、json等

原始字符串

在标签函数的第一个参数中,存在一个特殊的属性raw ,我们可以通过它来访问模板字符串的原始字符串,而不经过特殊字符的替换。

  1. function tag(strings) {
     console.log(strings.raw[0]);
    }

    tag`string text line 1 \n string text line 2`;
    // logs "string text line 1 \n string text line 2"

另外,使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

  1. var str = String.raw`Hi\n${2+3}!`;
    // "Hi\n5!"

    str.length;
    // 6

    str.split('').join(',');
    // "H,i,\,n,5,!"

研究了一下,其实模板字符串中的占位符${expression}相当于分隔符,将模板字符串分割,

  1. function tag(strings) {
    console.log(strings.raw[0]);

    console.log(strings.raw[1]);

    console.log(strings.raw[2]);
    }

    tag`${document.cookie}`;
    //0,1都是空,3是undefined
    tag`aaa${document.cookie}`;
    //0是aaa,1是空,3是undefined
    tag`aaa${document.cookie}bbb`;
    //0是aaa,1是bbb,3是undefined
    tag`aaa${document.cookie}bbb${document}ccc`;
    //0是aaa,1是bbb,3是ccc

从上面例子可以看出占位符${expression}相当于分隔符,将模板字符串分割。

带标签的模板字面量及转义序列

自ES2016起,带标签的模版字面量遵守以下转义序列的规则:

  • Unicode字符以"\u"开头,例如\u00A9

  • Unicode码位用"\u{}"表示,例如\u{2F804}

  • 十六进制以"\x"开头,例如\xA9

  • 八进制以""和数字开头,例如\251

注:八进制好像不管用

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

javascript模板字符串(反引号)的更多相关文章

  1. ES6中的模板字符串---反引号``

    在react中,反引号``有特殊的含义. 如MDN中所述,模板字符串(Template literals)允许嵌入表达式,并且支持多行字符串和字符串插补特性.基本语法为以下几种: 其中第一行为最基本用 ...

  2. javascript模板字符串(标签函数)

    前面介绍了javascript的模板字符串的基本知识,今天深入学习一下标签函数 模板字符串概述 这里先简单说一下模板字符串的概念 1.模板字符串,从名字上可以得出其实返回的是字符串,普通使用其实就想引 ...

  3. ES6模板字符串【${}配合反单引号一起用】

    先看看JavaScript中两个字符串的效果,就很容易知道模板字符串是个啥东西,其实一点也不新鲜.高级编程中,例如java里面的string.format就是干这个事情,诸如此类. 1. 概念理解 A ...

  4. javascript - 将字符串转换为模板字符串

    参考: https://www.itranslater.com/qa/details/2325714161562551296 是否可以将模板字符串创建为常用字符串 let a="b:${b} ...

  5. JavaScript——字符串——模板字符串

    JavaScript--字符串--模板字符串 字符串可以用反引号包裹起来,其中的${expression}表示特殊的含义,JavaScript会将expression代表的变量的值和反引号中的其它普通 ...

  6. javascript的字符串模板

    在其他语言存在字符串内插(string interpolation)或者叫变量内插(Variable interpolation).ES6中的称为template string. 模板字符串使用反引号 ...

  7. Linux下Shell脚本字符串单引号、双引号、反引号、反斜杠的作用和区别

    一.单引号 str='this is a string' 单引号字符串的限制: 单引号里的任何字符都会原样输出,单引号字符串中的变量是无效的: 单引号字串中不能出现单引号(对单引号使用转义符后也不行) ...

  8. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  9. 深入浅出ES6(四):模板字符串

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...

随机推荐

  1. SQL Server 等待统计信息基线收集

    背景 我们随时监控每个服务器不同时间段的wait statistics ,可以根据监控信息大概判断什么时候开始出现异常,相当于一个wait statistics基线收集,还可以具体分析占比高的等待类型 ...

  2. 在Excel工作表单元格中引用当前工作表名称

    在Excel工作表单元格中引用当前工作表名称 有多份Excel表格表头标题都为"××学校第1次拉练考试××班成绩表",由于工作表结构都是一样的,所以我每次都是复制工作表然后编辑修改 ...

  3. Vuex的认识和简单应用(一)

    一.vuex是一个专为vue.js应用程序开发的状态管理模式. 应用场景:1.多个视图依赖于同一个状态2.来自不同视图的行为需要变更同一个状态此时,我们可以把组件的共享状态抽取出来,以一个全局单例模式 ...

  4. java程序加到系统托盘的方法

    package swingtest; import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; impor ...

  5. Java工程师研发面经大合集

    百度研发面经整合版 软件研发工程师 基础研发工程师 百度智能云 百度核心搜索部 百度今年的提前批有点奇怪,好像都不走流程,牛客上好几个百度内推的帖子,我投了几个,基本上都是百度智能云的,当然也有其他部 ...

  6. sqlalchemy一对一关系映射

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...

  7. Js 执行上下文和作用域

    1.执行上下文和执行栈 执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行. 执行上下文的生命周期包括三个阶 ...

  8. unsigned char 与unsigned long互换

    unsigned long UCharToULong(unsigned char * pucVar ){unsigned long ulTemp=0;ulTemp=(unsigned long)(*p ...

  9. Flood Fill

    An image is represented by a 2-D array of integers, each integer representing the pixel value of the ...

  10. PostgreSQL查询数据库中包含某种类型的表有哪些

    and c.relnamespace = n.oid and nspname = 'public' and a.atttypid = t.oid and typname = 'TEXT' and c. ...