ECMAScript 6新增了使用模板字面量定义字符串的能力。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

语法

  1. `string text`
  3. `string text line 1
  4.  string text line 2`
  6. `string text ${expression} string text`
  8. tag `string text ${expression} string text`

带标签的模板字符串

标签函数接收到的参数依次是原始字符串数组和对每个表达式求值的结果。标签使您可以用函数解析模板字符串。如下：

  1. //strings :['that ', ' is a ', '', raw: Array(3)]
  2. //name:chentao
  3. //age:30
  4. function myTag(strings,name,age) {
  5.   const string1 = strings[0]
  6.   const string2 = strings[1]
  7.   let str = ''
  8.   if(age>60 ){
  9.     str = '老年人'
  10.   }
  11.   if(age>=30 && age<=60 ){
  12.     str = '中年人'
  13.   }else if(age < 30 && age>20){
  14.     str = '青年人'
  15.   }
  16.   else if(age < 30 && age>20){
  17.     str = '少年人'
  18.   }else{
  19.     str = '小屁孩'
  20.   }
  21.   return `${string1}${name}${string2}${str} `
  22. }
  23. var person = 'chentao'
  24. var age = 30
  25. myTag`that ${ person } is a ${ age }`;
  27. //'that chentao is a 中年人 '

原始字符串

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

  1. //Unicode示例
  2. console.log(`\u00A9`);            // ©
  3. console.log(String.raw`\u00A9`);  // \u00A9
  6. // 换行符示例
  7. console.log(`first line\nsecond line`);
  8. // first line
  9. // second line
  10. console.log(String.raw`first line\nsecond line`); // "first line\nsecond line"
  12. // 对实际的换行符来说是不行的
  13. // 它们不会被转换成转义序列的形式
  14. console.log(String.raw`first line
  15. second line`);
  16. // first line
  17. // second line