提问者:小点点

如何在JavaScript中进行字符串插值?


请考虑以下代码:

var age = 3;

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

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


共3个答案

匿名用户

自ES6以来,您可以使用模板文字:

null

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

匿名用户

如果适用,请使用ECMAScript2015的模板字符串文本。

按照ECMAScript5规范,没有直接的方法来实现它,但是ECMAScript6有模板字符串,在起草规范期间也称为准文本。 像这样使用它们:

> 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.jsV2.4.0来计算上面显示的所有模板字符串。 你也可以使用最新的Chrome来测试上面展示的例子。

注意:ES6规范现已定稿,但尚未被所有主要浏览器实现。
根据Mozilla开发人员网络页面,这将在以下版本中实现基本支持:Firefox 34,Chrome 41,Internet Explorer 12。 如果您是Opera,Safari或Internet Explorer用户,并且现在对此感到好奇,那么可以使用此测试床来进行测试,直到每个人都获得对此的支持为止。

匿名用户

Douglas Crockford的补救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的原型,您可以随时将其调整为独立的,或者将其放入其他名称空间,或者其他任何东西。