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

考虑以下代码：

var age = 3;

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

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

如果您真的想用大锤敲开螺母，您可以使用：

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

试试library（一个完整的开源JavaScript sprintf实现）。例如：

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

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

获取参数数组并返回格式化字符串。

Douglas Crockford的函数包括

string.prototype.replacement

函数。它简短、熟悉且易于使用：

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' }));

---

如果您不想更改字符串的原型，您可以始终将其调整为独立的，或者将其放置到其他名称空间中，或者其他任何地方。

注意事项：避免使用任何不允许您转义其自身分隔符的模板系统。例如，使用此处提到的

replacant（）

方法无法输出以下内容

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

简单的插值可能适用于小型自包含脚本，但通常会伴随此设计缺陷，从而限制任何严肃的使用。老实说，我更喜欢DOM模板，例如：

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

试试看，一个用于字符串插值的轻量级JavaScript模块

你能行

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

或

---

这里有一个解决方案，要求您为对象提供值。如果不提供对象作为参数，它将默认使用全局变量。但是最好还是坚持使用参数，它会更干净

String.prototype.interpolate=函数（props）{
返回此。replace（/\{（\w+）\}/g，函数（match，expr）{
返回（道具| |窗口）[expr]；
});
};
//测试：
//使用参数（建议的方法）
document.getElementById（“resultA”）.innerText=“expreation 1:{expreation1}”。插值（{expreation1:112}）；
//使用全局范围
var喷发2=116；
document.getElementById（“resultB”）.innerText=“Expreation 2:{Expreation2}”.interpolate（）
tl；博士
如果适用，请使用ECMAScript 2015的模板字符串文本

解释
根据ECMAScript 5规范，没有直接的方法可以做到这一点，但ECMAScript 6已经做到了，这在规范起草过程中也是众所周知的。使用它们如下：

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

您可以在
{}
中使用任何有效的JavaScript表达式。例如：

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

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

另一件重要的事情是，你不必再担心多行字符串了。你可以简单地把它们写成

> `foo
...     bar`
'foo\n    bar'

注意：我使用io.jsv2.4.0来评估上面显示的所有模板字符串。您还可以使用最新的Chrome来测试上述示例

注意：ES6规范是，但尚未由所有主要浏览器实现
根据，这将从以下版本开始实施基本支持：Firefox 34、Chrome 41、Internet Explorer 12。如果您是Opera、Safari或Internet Explorer用户，并且现在对此感到好奇，则可以使用它来玩游戏，直到每个人都得到支持。
如果您希望在
控制台.log
输出中插入，则只需

console.log("Eruption 1: %s", eruption1);
                         ^^

这里，
%s
就是所谓的“格式说明符”
console.log
内置了这种插值支持。
在第二个答案中展开，您可以编写一个函数来消除一些样板文件：

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!');

我在很多语言中都使用这种模式，但我还不知道如何正确地使用它，只是想快速地了解一个想法：

// JavaScript
let stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

虽然效率不高，但我觉得它可读性强。它始终有效，并且始终可用：

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

始终

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

从ES6开始，您可以使用：


const age=3
log（`I'm${age}year！`）
您可以轻松地使用ES6
模板字符串
并使用任何可用的transpilar（如babel）传输到ES5

const age = 3;

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

我可以用一个例子向您展示：


函数全名（第一个，最后一个）{
让fullName=first+“”+last；
返回全名；
}
函数fullNameStringInterpolation（第一个、最后一个）{
让fullName=`${first}${last}`；
返回全名；
}
console.log（'Old-School:'+全名（'Carlos'，'Gutierrez'））；
console.log（'newschool:'+fullNameStringInterpolation（'Carlos'，'Gutierrez'））在较旧的浏览器中使用模板语法失败，如果要创建供公众使用的HTML，这一点很重要。使用串联是一件乏味且难以理解的事情，特别是当您有许多或很长的表达式，或者必须使用括号来处理数字和字符串项的混合（两者都使用+运算符）时

PHP使用非常紧凑的表示法扩展包含变量甚至一些表达式的引用字符串：
$a=“颜色是$color”

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

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

最后，我想SaveTf（如C、C++、PHP）可以用JavaScript编写，虽然比其他的解决方案效率低一些。
 自从ES6以来，如果你想在对象键中进行字符串插值，你将得到一个<代码> SytRetryOrg:期望的属性名，得到'${'/c> > >如果你做了如下的事情：

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

您应该执行以下操作：

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

将更多内容替换为@Chris Nielsen帖子的ES6版本

自定义灵活插值：

var sourceElm=document.querySelector（'input'））
//插值回调
常量onInterpolate=s=>`${s}`
//收听“输入”事件
sourceElm.addEventListe
String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

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

util.format("Hello my name is %s", "Brent");
> Hello my name is Brent

console.log("This really bad error happened: %s", "ReferenceError");
> This really bad error happened: ReferenceError

let age = 3;

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