ES6 特性：模板字符串有什么用？答案

【问题标题】：ES6 Feature: How are Template Strings useful?ES6 特性：模板字符串有什么用？
【发布时间】：2015-08-13 02:12:39
【问题描述】：

AKA 模板文字，字符串插值。 (Wiki here.)

它们为什么有用？

什么时候不应该使用它们？

这些特性与使用 JSX 和 React 有何相似之处和不同之处？

如何有效地使用 wiki 底部提到的String.raw()？

【问题讨论】：

请记住，您在 ES6 中可以做的所有事情，您都可以在 ES5 中做，只是以一种更丑陋的方式。在 ES5 中用 HTML 构建是一件悲惨的事情，在模板构建中使用 += 和嵌套在变量连接中。生活质量比什么都重要。
JSX 与字符串无关。苹果和橙子。

标签： javascript ecmascript-6 string-interpolation

【解决方案1】：

使用 1

它是多行的。（在 JS 中，规范字符串在换行符之前需要反斜杠。）

使用2

另一种风格。比较：

a: ${a}, b: ${b}, c: ${c}, d: ${d}, e: ${e}

.with:

a: '+a+', b: '+b+', c: '+c+', d: '+d+', e: '+e

.并比较：

function generated_function(){
    '+ statement1 +'
    '+ function2_name +'();
    f3();
    f'+ 5*5 +'();
}

.with:

function generated_function(){
    ${statement1}
    ${function2_name}();
    f3();
    f${ 5*5 }();
}

Nicety

它也是反斜杠转义的 - 由或。

Nb

不同于。参见§。

【讨论】：

【解决方案2】：

字符串模板（或字符串插值）功能在许多编程语言中无处不在。当您有一个不同的或重复的模板并希望用当前范围内的变量填充时，您应该使用它。它使模板比字符串连接或printf 样式格式更具可读性。

与 JSX 的区别在于 JSX 用于模板化 HTML，而字符串模板用于模板化任何类型的文本，例如日志消息或用户输出。

当您希望对具有大量实际反斜杠而不是转义反斜杠的字符串进行操作时，原始字符串可能很有用。例如，如果你想描述一个字符串\n\r\u0000，那么你可以写成\\n\\r\\u0000，这样可读性不是很好。对于原始字符串，您可以将其写为String.raw('\n\r\u0000')。

【讨论】：

【解决方案3】：

它们使代码更具可读性。例如：

// ES6
let fruit = 'apples'
console.log(`I like ${fruit}.`)

ES5 等价物：

// ES5
var fruit = 'apples'
console.log('I like ' + fruit + '.')

多行功能也方便写大块字：

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

ES5 等价物：

// ES5
console.log("string text line 1\nstring text line 2")

如果存在变量，则应始终使用模板字符串。

【讨论】：

【解决方案4】：

该代码在不终止字符串和附加变量的情况下更具可读性。

var links = [{
  url: "http://www.google.com",
  name: "Google"
}, {
  url: "http://www.yahoo.com",
  name: "Yahoo"
}, {
  url: "http://www.bing.com",
  name: "Bing"
}];

var output = "<ul>";

for (var i = 0, len = links.length; i < len; i++) {

  output += `
      <li><a href="${links[i].url}">${links[i].name}</a></li>
   `;

}

output += "</ul>";
document.getElementById('output').innerHTML = output;

<div id="output">


</div>

【讨论】：

如果使用 ES2015 字符串插值，那么没有理由不使用 for-of。 for (let link of links) ...