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

Question

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

它们为什么有用？

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

这些功能与将 JSX 与 React 结合使用有何异同？

我怎样才能像维基底部提到的那样有效地使用String.raw()？

Answer 1

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

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 2

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

// 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 3

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

与 JSX 的不同之处在于，JSX 用于模板化 HTML，而字符串模板用于为任何类型的文本（例如，日志消息或用户输出）进行模板化。

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

Answer 4

使用 1

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

使用 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

它也是反斜杠转义的——<${> by <\${> or <$\{>.

Nb

它与不同。比照.

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

ES6 Feature: How are Template Strings useful?

javascript

string-interpolation

ecmascript-6

使用 1

使用 2

Nicety

Nb