如何在 JavaScript 字符串中插入变量？答案

【问题标题】：How to insert variables in JavaScript strings?如何在 JavaScript 字符串中插入变量？
【发布时间】：2013-09-30 22:29:53
【问题描述】：

在 JavaScript 中在字符串中插入变量的最佳方法是什么？我猜不是这个：

var coordinates = "x: " + x + ", y: " + y;

在 Java 中，Strings 是不可变的，执行上述操作会不必要地创建和丢弃 Strings。 Ruby 是类似的，并且有一种很好的方式来完成上述操作：

coordinates = "x: #{x}, y: #{y}"

JavaScript 是否存在类似的东西？

【问题讨论】：

字符串在 JavaScript 中也是不可变的。加号（连接）运算符从旧字符串中生成新字符串。
我们在这里是在严格地谈论香草吗？无论如何，underscores 的模板在这方面做得很好
JavaScript equivalent to printf/string.format 的可能重复项

标签： javascript string

【解决方案1】：

在 ES6 中作为“模板字符串”引入

MDN 文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

const name = "Nick"
const greeting = `Hello ${name}`  // "Hello Nick"

【讨论】：

模板字符串是 ES6 的一部分，该标准出现了，并且在 2013 年我发布这个问题之后由浏览器实现。不过，你是对的，我会给你支票:)
这里使用反引号有什么特别的原因吗？单引号会起作用吗？
不，您需要使用反引号。这就是 echmascript (javascript) 如何知道如何将变量注入${} 位置。一个勾号只是表示一个普通的字符串，并会被解释为这样。

【解决方案2】：

这在 JavaScript 中很好。 sprintf 或 String.format 没有很好的内置等效项，但是 you can build your own。

不要担心“不必要的”字符串对象。这绝对是微优化。如果您需要额外的一点点性能或内存优化，请解决它，但在分布式软件中，您可能不需要。

【讨论】：

另外，如果这确实是常见的性能问题，我希望 JS 实现对其进行优化。我知道 Java 编译器会做这样的优化。

【解决方案3】：

https://www.npmjs.com/package/stringinject

https://github.com/tjcafferkey/stringinject

我创建这个函数就是为了做到这一点，它允许你传入一个字符串和一个带有键的对象，这些键将字符串中的占位符值替换为它们的值，如下所示：

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

// My username is tjcafferkey on Github

【讨论】：

很确定你不小心转置了变量。你写它的方式，我希望它将 str 设置为“我的用户名是 tjcafferkey 上的 Github”
好地方。在我的例子中弄错了。

【解决方案4】：

如果由于某种原因您每秒执行多次此操作并且每次调用多次引用字符串，您始终可以将字符串本身存储为变量。

var preX = 'x: '
  , preY = 'y: '
  , coords
  ;
coords = preX + x + preY + y;

这当然应该得到基准测试/分析的支持，但是每帧创建许多字符串通常是不必要的垃圾的来源，这可能会导致线路卡顿。

【讨论】：

真的有一个不会内联所有原始字符串的 JS 解释器吗？我觉得这在某些浏览器上可能会较慢，因为现在引擎必须检查可能已更改的preX（等）变量，而更改字符串文字是不可能的。
同意，我希望它会更慢。但是，我的案例是针对每帧数百次引用相同的字符串文字（例如在具有许多动态标记点的可视化中）。优化查找的速度（将只是索引到给定的偏移量）可能不会超过每个文字的字符串创建时间。我想你是正确的，文字在某种程度上得到了优化，但这会因浏览器而异，使得依赖于该行为实现的代码依赖。