如何在JavaScript中做字符串插值?

考虑下面的代码:

var age = 3;

console.log("I'm " + age + " years old!");

除了字符串连接之外，还有其他方法可以将变量的值插入到字符串中吗?

当前回答

警告:避免任何不允许您转义其自己的分隔符的模板系统。例如，使用此处提到的supplant()方法将无法输出以下内容。

“多亏了我的年龄变量，我才3岁。”

简单的插值可能适用于小型的自包含脚本，但通常会出现这种设计缺陷，限制任何重要的使用。老实说，我更喜欢DOM模板，比如:

<div> I am <span id="age"></span> years old!</div>

$('#age').text(3)

另外，如果你只是厌倦了字符串连接，总有替代语法:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

其他回答

let age = 3;

console.log(`I'm ${age} years old!`);

你可以使用反撇号' '和ES6模板字符串

警告:避免任何不允许您转义其自己的分隔符的模板系统。例如，使用此处提到的supplant()方法将无法输出以下内容。

“多亏了我的年龄变量，我才3岁。”

简单的插值可能适用于小型的自包含脚本，但通常会出现这种设计缺陷，限制任何重要的使用。老实说，我更喜欢DOM模板，比如:

<div> I am <span id="age"></span> years old!</div>

$('#age').text(3)

另外，如果你只是厌倦了字符串连接，总有替代语法:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

从ES6开始，如果你想在对象键中做字符串插值，你会得到一个SyntaxError: expected属性名，得到'${'如果你做这样的事情:

let age = 3
let obj = { `${age}`: 3 }

你应该做以下事情:

let obj = { [`${age}`]: 3 }

虽然模板可能最适合你描述的情况，但如果你有或想要你的数据和/或参数是可迭代/数组形式，你可以使用String.raw。

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

将数据作为数组，可以使用展开操作符:

const args = [3, 'yesterday'];
String.raw({
  raw: ["I'm ", " years old as of ", ""]
}, ...args);

在旧的浏览器中使用模板语法会失败，这对于创建供公众使用的HTML很重要。使用连接是乏味且难以阅读的，特别是当您有很多或很长的表达式时，或者如果您必须使用括号来处理数字和字符串项的混合(两者都使用+运算符)。

PHP扩展带引号的字符串，其中包含变量，甚至一些表达式，使用非常紧凑的符号:$a="颜色是$color";

在JavaScript中，可以编写一个有效的函数来支持这一点:var a=S('the color is '，color);，使用可变数量的参数。虽然在本例中没有连接的优势，但当表达式变长时，语法可能会更清晰。或者可以像在PHP中那样，使用JavaScript函数使用美元符号表示表达式的开始。

另一方面，编写一个有效的变通函数来为旧浏览器提供类似模板的字符串展开并不困难。可能已经有人这么做了。

最后，我认为sprintf(就像在C、c++和PHP中一样)可以用JavaScript编写，尽管它的效率要比其他解决方案低一些。

推荐文章