考虑下面的代码:
var age = 3;
console.log("I'm " + age + " years old!");
除了字符串连接之外,还有其他方法可以将变量的值插入到字符串中吗?
考虑下面的代码:
var age = 3;
console.log("I'm " + age + " years old!");
除了字符串连接之外,还有其他方法可以将变量的值插入到字符串中吗?
当前回答
博士tl;
使用ECMAScript 2015的模板字符串字面量,如果适用。
解释
根据ECMAScript 5规范,没有直接的方法来做到这一点,但ECMAScript 6有模板字符串,在规范起草期间也被称为准字面量。像这样使用它们:
> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'
可以在{}中使用任何有效的JavaScript表达式。例如:
> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'
另一件重要的事情是,你不必再担心多行字符串了。你可以简单地写成
> `foo
... bar`
'foo\n bar'
注意:我使用io.js v2.4.0计算上面所示的所有模板字符串。你也可以使用最新的Chrome来测试上面显示的例子。
注:ES6规范现在已经最终确定,但还没有被所有主要浏览器实现。根据Mozilla开发者网络页面,这将从以下版本开始实现基本支持:Firefox 34, Chrome 41, Internet Explorer 12。如果您是Opera、Safari或Internet Explorer用户,并且现在对此感到好奇,那么可以使用这个测试平台进行测试,直到每个人都得到支持为止。
其他回答
你可以使用Prototype的模板系统,如果你真的想用大锤敲开一个坚果:
var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));
试试sprintf库(一个完整的开源JavaScript sprintf实现)。例如:
vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);
Vsprintf接受一个参数数组并返回一个格式化的字符串。
扩展Greg Kindel的第二个答案,你可以写一个函数来消除一些样板文件:
var fmt = {
join: function() {
return Array.prototype.slice.call(arguments).join(' ');
},
log: function() {
console.log(this.join(...arguments));
}
}
用法:
var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');
Douglas Crockford的remedy JavaScript包含一个String.prototype.supplant函数。它短小,熟悉,易于使用:
String.prototype.supplant = function (o) {
return this.replace(/{([^{}]*)}/g,
function (a, b) {
var r = o[b];
return typeof r === 'string' || typeof r === 'number' ? r : a;
}
);
};
// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));
如果你不想改变String的原型,你总是可以把它调整成独立的,或者把它放在其他的名称空间里,等等。
警告:避免任何不允许您转义其自己的分隔符的模板系统。例如,使用此处提到的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(" ");