.join`` 在 JavaScript 中是什么意思？

Question

我遇到了这个代码：

new Array(10).fill('1').join``;

我不知道紧接其后使用的符号``.join是什么意思。

我认为正确的语法是new Array(10).fill('1').join('').

欢迎任何想法谢谢！

const data = new Array(10).fill('1').join``;
console.log(data)

Answer 1

你看到的是一个带标签的模板文字，它是 ES6 规范的一部分。该模式在例如 Google 的 Polymer Project（现在lit-element）中被大量使用。它使用提供的模板文字调用提供的函数（或在本例中的方法）。

除了用于创建各种领域特定语言 (DSL) 之外，它还经常用于减少代码高尔夫中Javascript 答案的字节数在我链接的 Google 项目的情况下，它用作域的一部分- 特定的 HTML 模板语言。

Answer 2

arr.join``; 是一个标记的模板文字。

它适用于join（或任何其他函数）“模板文字字符串的内容”。

当我说“适用于模板文字字符串的内容”时，它实际上比这复杂一点：字符串的所有静态部分都作为第一个参数放入数组中，插入的值作为剩余参数。

一个简单的例子会更容易理解：

var demo = (str, ...names) => {
  console.log(str);
  console.log(names);
};

var users = ['john', 'jane', 'joe'];

demo`Members: ${users[0]}, ${users[1]} and ${users[2]}.`;
// LOG: ["Members: ", ", ", " and ", "."]
// LOG: ["john", "jane", "joe"]

demo``;
// LOG: [""]
// LOG: []

最后一行回答了您的问题，因为arr.join``;它与arr.join("");仅短两个字符相同，这在您参加JS1K比赛时很有用。

在这种特殊情况下，我不确定作者是否想节省一些字节，因为我们可以将初始语句缩短如下：

new Array(10).fill('1').join``;
new Array(10).fill(1).join``;
Array(10).fill(1).join``;
'1'.repeat(10);
'1111111111';

标记模板只是一个美化的函数调用吗？

这两个表达式可能看起来相似，但它们不是：

var yy = 20;
year`19${yy}`;
year(`19${yy}`);

在第一个表达式中，我们可以访问字符串的静态和动态部分："19"和20。在第二个表达式中，我们只得到“最终”字符串"1920"。

当一个人想要保留意图但允许在幕后进行复杂的文本处理时，这很有用。

我们知道这是不安全的：

var sql = `SELECT * FROM users where email="${email}" AND password="${password}"`;

为了降低 SQL 注入的风险，经常会看到以下内容：

var sql = select('*').from('users').where('AND').eq('email', email).eq('password', password);

然而，可以说我们已经用一个人们不太可能熟悉的有点笨拙的 API 来交换 SQL 的表达能力。

如果标记模板文字可以访问字符串的静态和动态部分，我们可以构建特定于域的标记模板文字：

var sql = safe_sql`SELECT * FROM users where email="${email}" AND password="${password}"`;