ES2015 中的模板字符串答案

【问题标题】：Template strings in ES2015ES2015 中的模板字符串
【发布时间】：2016-08-20 06:51:07
【问题描述】：

ES2015模板字符串上下文中“传递的数组被冻结”是什么意思？

【问题讨论】：

标签： javascript ecmascript-6 template-strings

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

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

一个对象被冻结当且仅当它不是extensible，它的所有属性都是不可配置的，并且它的所有数据属性（即不是具有getter或setter组件的访问器属性的属性）都是不可配置的可写。

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

【讨论】：

【解决方案3】：

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

(function(parts, a, b) {
  return Object.isFrozen(parts) && Object.isFrozen(parts.raw);
}) `foo${0}bar${0}baz`;

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

在上面的代码中，函数对象是模板字面量的“标签”。

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

测试基本上是检查 ES6 Spec 的this section，

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

【讨论】：

值得一提的是什么是冻结对象——冻结对象是其属性无法修改的对象。您可以使用Object.freeze 创建自己的冻结对象，并通过Object.isFrozen 检查对象是否被冻结。请注意，不可能“解冻”对象。您可以在控制台中查看：Object.isFrozen(Object.freeze({}))。
所以答案顶部的函数表达式意味着隐藏的函数表达式在幕后与每个模板文字相关联？
@BenAston 不是每个文字，只是这个模板文字。如果你想将它与其他文字一起使用，你可以这样做 const fn = ...; 然后 "fn foo${0}"