如何在没有连接的情况下插值JavaScript中字符串中的变量？

我知道在PHP中我们可以做这样的事情：

$hello = "foo";
$my_string = "I pity the $hello";

输出： "I pity the foo"

我想知道JavaScript是否也可以实现同样的功能。在字符串内部使用变量而不使用串联-编写起来看起来更加简洁和优雅。

从Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge开始，您可以使用名为Template Literals的ES2015 / ES6功能，并使用以下语法：

`String text ${expression}`

模板文字用反引号（``） （重音）括起来，而不是双引号或单引号。

例：

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

那有多干净？

奖金：

它还允许在JavaScript中使用多行字符串而不进行转义，这对于模板非常有用：

return `
    <div class="${foo}">
         ...
    </div>
`;

由于较旧的浏览器（Internet Explorer和Safari <= 8）不支持此语法，因此您可能希望使用Babel将代码转换为ES5，以确保其可在任何地方运行。

边注：

从IE8 +开始，您可以在console.log使用基本的字符串格式：

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.

如果您想编写CoffeeScript，可以执行以下操作：

hello = "foo"
my_string = "I pity the #{hello}"

CoffeeScript实际上是javascript，但是语法更好。

有关CoffeeScript的概述，请参阅本入门指南。

在 Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge之前，不是，这在javascript中是不可能的。您将不得不诉诸：

var hello = "foo";
var my_string = "I pity the " + hello;

在 Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge之前，没有。尽管您可以尝试使用sprintf for JavaScript来达到目标：

var hello = "foo";
var my_string = sprintf("I pity the %s", hello);

如果您想对微模板进行插值，那么我会喜欢Mustache.js 。

来源：oschina

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

标签