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

Question

又名模板文字、字符串插值。 （维基在这里。）

它们为什么有用？

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

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

如何按照维基底部所述有效地使用 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

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

最后，这是另一种[可能更好]的风格。比较：

`

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 }();
}

`

.

顺便说一句它也是反斜杠转义的——<${>通过<${>或<$\{>。

Nb JS 也有 。参见§.