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

考虑以下代码：

var age = 3;

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

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

#1楼

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

“由于我的{age}变量，我才3岁。”

简单的内插可能适用于小型的独立脚本，但通常会出现这种设计缺陷，从而限制了任何认真的使用。老实说，我更喜欢DOM模板，例如：

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

并使用jQuery操作： $('#age').text(3)

或者，如果您只是厌倦了字符串连接，那么总会有其他语法：

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

#2楼

如果您确实想使用大锤破解螺母，可以使用Prototype的模板系统：

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

#3楼

尝试sprintf 。例如：

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

#4楼

Douglas Crockford的Remedial 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的原型，则可以始终将其改编为独立的，或将其放置在其他名称空间等中。

#5楼

尝试kiwi ，这是一个用于字符串插值的轻量级JavaScript模块。

你可以做

Kiwi.compose("I'm % years old!", [age]);

要么

Kiwi.compose("I'm %{age} years old!", {"age" : age});

来源：oschina

链接：https://my.oschina.net/stackoom/blog/3161099

标签

kiwi

sprintf

jquery

Prototype