你可以使用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接受一个参数数组并返回一个格式化的字符串。

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(" ");

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

你可以这样做

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

or

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

下面是一个解决方案，它要求您提供一个具有值的对象。如果你不提供一个对象作为参数，它将默认使用全局变量。但是最好还是使用参数，这样更简洁。

String.prototype.interpolate = function(props) { return this.replace(/\{(\w+)\}/g, function(match, expr) { return (props || window)[expr]; }); }; // Test: // Using the parameter (advised approach) document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 }); // Using the global scope var eruption2 = 116; document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate(); <div id="resultA"></div><div id="resultB"></div>

博士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用户，并且现在对此感到好奇，那么可以使用这个测试平台进行测试，直到每个人都得到支持为止。

如果您想在console.log输出中插入，那么只需

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

这里，%s是所谓的“格式说明符”。log内置了这种插值支持。

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

当我不知道如何正确地表达，只想快速地得到一个想法时，我就会在很多语言中使用这种模式:

// JavaScript
let stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Inigo 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 Mother'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Son shoulder'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'made a gaping mortal-making wound upon.'

从ES6开始，你可以使用模板文字:

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

附注:注意反引号的使用:' '。

你可以很容易地使用ES6模板字符串，并使用任何可用的transpilar(如babel)编译到ES5。

const age = 3;

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

http://www.es6fiddle.net/im3c3euc/

我可以给你们举个例子:

函数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'));

在旧的浏览器中使用模板语法会失败，这对于创建供公众使用的HTML很重要。使用连接是乏味且难以阅读的，特别是当您有很多或很长的表达式时，或者如果您必须使用括号来处理数字和字符串项的混合(两者都使用+运算符)。

PHP扩展带引号的字符串，其中包含变量，甚至一些表达式，使用非常紧凑的符号:$a="颜色是$color";

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

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

最后，我认为sprintf(就像在C、c++和PHP中一样)可以用JavaScript编写，尽管它的效率要比其他解决方案低一些。

从ES6开始，如果你想在对象键中做字符串插值，你会得到一个SyntaxError: expected属性名，得到'${'如果你做这样的事情:

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

你应该做以下事情:

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

替换更多的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."

自定义灵活插补:

var sourceElm = document.querySelector('input') // interpolation callback const onInterpolate = s => `<mark>${s}</mark>` // listen to "input" event sourceElm.addEventListener('input', parseInput) // parse on window load parseInput() // input element parser function parseInput(){ var html = interpolate(sourceElm.value, undefined, onInterpolate) sourceElm.nextElementSibling.innerHTML = html; } // the actual interpolation function interpolate(str, interpolator = ["{{", "}}"], cb){ // split by "start" pattern return str.split(interpolator[0]).map((s1, i) => { // first item can be safely ignored if( i == 0 ) return s1; // for each splited part, split again by "end" pattern const s2 = s1.split(interpolator[1]); // is there's no "closing" match to this part, rebuild it if( s1 == s2[0]) return interpolator[0] + s2[0] // if this split's result as multiple items' array, it means the first item is between the patterns if( s2.length > 1 ){ s2[0] = s2[0] ? cb(s2[0]) // replace the array item with whatever : interpolator.join('') // nothing was between the interpolation pattern } return s2.join('') // merge splited array (part2) }).join('') // merge everything } input{ padding:5px; width: 100%; box-sizing: border-box; margin-bottom: 20px; } *{ font: 14px Arial; padding:5px; } <input value="Everything between {{}} is {{processed}}" /> <div></div>

虽然模板可能最适合你描述的情况，但如果你有或想要你的数据和/或参数是可迭代/数组形式，你可以使用String.raw。

String.raw({
  raw: ["I'm ", " years old!"]
}, 3);

将数据作为数组，可以使用展开操作符:

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

找不到我要找的东西，然后找到了

如果你使用的是Node.js，有一个内置的utipackage，它有一个format函数，工作方式是这样的:

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

巧合的是，在Node.js -中，这也被内置到console.log版本中

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

你可以使用反撇号' '和ES6模板字符串

最简单的就是

`my string ${VARIABLE}`

一种效率较低的方法是

function format(str, ...params) {
  for(const param of params)
    str = str.replace("%", param);
   return str;
}

可以和哪个一起使用

format("My % string", "interpolation")