考虑下面的代码:
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(" ");
其他回答
试试kiwi吧，它是一个轻量级的JavaScript模块，用于字符串插值。
你可以这样做
Kiwi.compose("I'm % years old!", [age]);
or
Kiwi.compose("I'm %{age} years old!", {"age" : age});
替换更多的ES6版本的@Chris Nielsen的帖子。
String.prototype.supplant = function (o) {
return this.replace(/\${([^\${}]*)}/g,
(a, b) => {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";
string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."
警告:避免任何不允许您转义其自己的分隔符的模板系统。例如，使用此处提到的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(" ");
虽然模板可能最适合你描述的情况，但如果你有或想要你的数据和/或参数是可迭代/数组形式，你可以使用String.raw。
String.raw({
raw: ["I'm ", " years old!"]
}, 3);
将数据作为数组，可以使用展开操作符:
const args = [3, 'yesterday'];
String.raw({
raw: ["I'm ", " years old as of ", ""]
}, ...args);
我可以给你们举个例子:
函数fullName(first, last) { let fullName = first + " " + last; 返回fullName; } 函数fullNameStringInterpolation(first, last) { let fullName = ' ${first} ${last} '; 返回fullName; } console.log('Old School: ' + fullName('Carlos'， 'Gutierrez')); console.log('New School: ' + fullNameStringInterpolation('Carlos'， 'Gutierrez'));
