标签模板字符串

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

 

插入表达式

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

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

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

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

嵌套模板

在某些时候，嵌套模板是具有可配置字符串的最简单也是更可读的方法。 在模板中，只需在模板内

的占位符 ${ } 内使用它们，就可以轻松地使用内部反引号。 例如，如果条件 a 是真的，那么返回这个模板化的文字。

es5:

var classes = 'header'
classes += (isLargeScreen() ?
   '' : item.isCollapsed ?
     ' icon-expander' : ' icon-collapser');

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

const classes = `header ${ isLargeScreen() ? '' :
    (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`;

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

const classes = `header ${ isLargeScreen() ? '' :
 `icon-${item.isCollapsed ? 'expander' : 'collapser'}` }`;

带标签的模板字符串

更高级的形式的模板字符串是带标签的模板字符串。标签使您可以用函数解析模板字符串。

标签函数的第一个参数包含一个字符串值的数组。其余的参数与表达式相关。最后，你的

函数可以返回处理好的的字符串（或者它可以返回完全不同的东西 , 如下个例子所述）。

用于该标签的函数的名称可以被命名为任何名字。

 1 var person = 'Mike';
 2 var age = 28;
 3 
 4 function myTag(strings, personExp, ageExp) {
 5 
 6   var str0 = strings[0]; // "that "
 7   var str1 = strings[1]; // " is a "
 8 
 9   // There is technically a string after
10   // the final expression (in our example),
11   // but it is empty (""), so disregard.
12   // var str2 = strings[2];
13 
14   var ageStr;
15   if (ageExp > 99){
16     ageStr = 'centenarian';
17   } else {
18     ageStr = 'youngster';
19   }
20 
21   return str0 + personExp + str1 + ageStr;
22 
23 }
24 
25 var output = myTag`that ${ person } is a ${ age }`;
26 
27 console.log(output);
28 // that Mike is a youngster

正如下面例子所展示的，标签函数并不一定需要返回一个字符串。

 1 function template(strings, ...keys) {
 2   return (function(...values) {
 3     var dict = values[values.length - 1] || {};
 4     var result = [strings[0]];
 5     keys.forEach(function(key, i) {
 6       var value = Number.isInteger(key) ? values[key] : dict[key];
 7       result.push(value, strings[i + 1]);
 8     });
 9     return result.join('');
10   });
11 }
12 
13 var t1Closure = template`${0}${1}${0}!`;
14 t1Closure('Y', 'A');  // "YAY!" 
15 var t2Closure = template`${0} ${'foo'}!`;
16 t2Closure('Hello', {foo: 'World'});  // "Hello World!"

原始字符串

 在标签函数的第一个参数中，存在一个特殊的属性raw ，我们可以通过它来

访问模板字符串的原始字符串，而不经过特殊字符的替换。

1 function tag(strings) {
2   console.log(strings.raw[0]);
3 }
4 
5 tag`string text line 1 \n string text line 2`;
6 // logs "string text line 1 \n string text line 2" ,
7 // including the two characters '\' and 'n'

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

1 var str = String.raw`Hi\n${2+3}!`;
2 // "Hi\n5!"
3 
4 str.length;
5 // 6
6 
7 str.split('').join(',');
8 // "H,i,\,n,5,!"