ES2015 中的模板字符串

Question

"passed array is frozen" 在 ES2015 模板字符串上下文中的含义是什么？

Answer 1

您可以在 ECMA Script 6 中定义自定义模板文字标签。例如，

(function(parts, a, b) {
  return Object.isFrozen(parts) && Object.isFrozen(parts.raw);
}) `foo[=10=]bar[=10=]baz`;

来源：https://kangax.github.io/compat-table/es6/#test-template_literals

在上面的代码中，函数对象是模板文字的"tag"。

当评估模板文字时，将使用模板文字的所有部分调用标记函数（在本例中，它们是 foo、bar 和 baz ) 作为一个数组。您看到的测试用例是为了确保数组对象是否已被冻结。

测试基本检查ES6规范的this section，

Perform SetIntegrityLevel(rawObj, "frozen").
...
Perform SetIntegrityLevel(template, "frozen").

Answer 2

在模板字符串的上下文中没有任何特殊意义。它只是意味着数组is frozen。来自文档：

An object is frozen if and only if it is not extensible, all its properties are non-configurable, and all its data properties (that is, properties which are not accessor properties with getter or setter components) are non-writable.

所以传递给标记函数的字符串数组本质上是不可变的。这应该允许引擎将其存储为常量，并在每次评估标记的模板文字时重复传递相同的数组对象。

Answer 3

模板字符串是 ECMA6 概念，我们可以在其中使用“`”编写和附加多行代码，就像我们以前使用双引号和字符串连接一样。

var container = document.getElementById('container');

var todo = {
    id: 123,
    name: "Pick up dry cleaning",
    completed: true
}

container.innerHTML = `
<div todo='$(todo.id)' class="list-group-item"> 
 <i class='${todo.completed}?"hidden":"glyphicon-ok"} text-success glyphicon'></i>
 <span class="name">${todo.name}</span>
`
Templates strings are the ECMA6 concepts where we can write and append multiple line code with " ` " as before we use to do with double quotes with string concat.

  <div id="container" class="container">
    </div>

ES2015 中的模板字符串

Template strings in ES2015

javascript

ecmascript-6

template-strings