JS ES2015里的模板字符串

在js代码里，我们经常要重组字符串，或者定义下js模版，做法很老套,一个个拼接起来，我们现在可以直接在里面嵌入表达式。

m2里的UI Components也需要用到这个模版文字，我们有必要学习下。

https://devdocs.magento.com/guides/v2.3/ui_comp_guide/concepts/ui_comp_template_literals.html

语法

`string text` `string text line 1  string text line 2` `string text ${expression} string text` tag `string text ${expression} string text`

描述

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

``` === "`" // --> true

多行字符串

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

console.log(&＃39;string text line 1n&＃39; +&＃39;string text line 2&＃39;); // "string text line 1 // string text line 2"

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

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

插入表达式

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

var a = 5; var b = 10; console.log(&＃39;Fifteen is &＃39; + (a + b) + &＃39; andnnot &＃39; + (2 * a + b) + &＃39;.&＃39;); // "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 = &＃39;header&＃39;classes += (isLargeScreen() ?    &＃39;&＃39; : item.isCollapsed ?      &＃39; icon-expander&＃39; : &＃39; icon-collapser&＃39;);

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

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

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

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

带标签的模板字符串

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

var person = &＃39;Mike&＃39;;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 = &＃39;centenarian&＃39;;   } else {     ageStr = &＃39;youngster&＃39;;   }   return str0 + personExp + str1 + ageStr;   }   var output = myTag`that ${ person } is a ${ age }`;   console.log(output);   // that Mike is a youngster

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

function template(strings, ...keys) {   return (function(...values) {     var dict = values[values.length - 1] || {};     var result = [strings[0]];     keys.forEach(function(key, i) {       var value = Number.isInteger(key) ? values[key] : dict[key];       result.push(value, strings[i + 1]);     });     return result.join(&＃39;&＃39;);   });   }   var t1Closure = template`${0}${1}${0}!`;   t1Closure(&＃39;Y&＃39;, &＃39;A&＃39;); // "YAY!"    var t2Closure = template`${0} ${&＃39;foo&＃39;}!`;   t2Closure(&＃39;Hello&＃39;, {foo: &＃39;World&＃39;});  // "Hello World!"

原始字符串

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

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" , // including the two characters &＃39;&＃39; and &＃39;n&＃39;

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

var str = String.raw`Hin${2+3}!`; // "Hin5!" str.length; //6 str.split(&＃39;&＃39;).join(&＃39;,&＃39;); // "H,i,,n,5,!"

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

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

• Unicode字符以"u"开头，例如u00A9
• Unicode码位用"u{}"表示，例如u{2F804}
• 十六进制以"x"开头，例如xA9
• 八进制以""和数字开头，例如251

这表示类似下面这种带标签的模版是有问题的，因为对于每一个ECMAScript语法，解析器都会去查找有效的转义序列，但是只能得到这是一个形式错误的语法：

latex`unicode` // 在较老的ECMAScript版本中报错（ES2016及更早） // SyntaxError: malformed Unicode character escape sequence

ES2018关于非法转义序列的修订

带标签的模版字符串应该允许嵌套支持常见转义序列的语言（例如DSLs、LaTeX）。ECMAScript提议模版字面量修订(第4阶段，将要集成到ECMAScript 2018标准) 移除对ECMAScript在带标签的模版字符串中转义序列的语法限制。

不过，非法转义序列在"cooked"当中仍然会体现出来。它们将以 undefined 元素的形式存在于"cooked"之中：

function latex(str) {   return { "cooked": str[0], "raw": str.raw[0] } }  latex`unicode` // { cooked: undefined, raw: "\unicode" }

值得注意的是，这一转义序列限制只对带标签的模板字面量移除，而不包括不带标签的模板字面量：

let bad = `bad escape sequence: unicode`;

原文链接：

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