ES6功能：模板字符串如何有用？

Question

AKA模板文字，字符串插值。 （Wiki here.）

为什么它们有用？

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

这些功能与使用JSX和React相比有何不同？

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

Answer 1

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

// 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")

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

Answer 2

字符串模板（或字符串插值）功能在许多编程语言中无处不在。如果您希望使用当前范围中的变量填充不同或重复的模板，则应使用它。它使模板比串联或printf - 样式格式化更具可读性。

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

当您希望对具有大量实际反斜杠但不转义反斜杠的字符串进行操作时，原始字符串可能很有用。例如，如果要描述字符串\n\r\u0000，则将其写为\\n\\r\\u0000，这不是非常易读。使用原始字符串，您可以将其写为String.raw('\n\r\u0000')。

Answer 3

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

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>

Answer 4

使用1

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

---

使用2

另类风格。比较：

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

。随着：

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

。并比较：

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

。随着：

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

Nicety

它的反斜杠也逃脱了 - ＆lt; $ {＆gt;由＆lt; \ $ {＆gt;或＆lt; $ \ {＆gt;。

Nb

与＆lt; String.raw＆gt;不同。 Cf §。