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

你可以这样做

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

or

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

在旧的浏览器中使用模板语法会失败，这对于创建供公众使用的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>

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

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

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