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

Question

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

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

在Java中，String是不可变的，做类似上述操作会不必要地创建和丢弃String。Ruby也类似，并且有一种很好的方法来完成上述操作:

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

JavaScript有类似的东西吗？

- at.

---

在JavaScript中，字符串也是不可变的。加号（连接）运算符可以从旧字符串的片段创建一个新字符串。 - Joe Simmons

我们严格来说只谈论基础部分吗？不管怎样，下划线模板在这方面做得非常好。 - raam86

可能是JavaScript中的printf/string.format等价物的重复问题。 - Naftali

Answer 1

在ES6中引入了“模板字符串”（template strings）。

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

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

- Nick Brady

---

模板字符串是ES6的一部分，这个标准在2013年发布后很久才被浏览器实现。尽管如此，你是正确的，我会授予你勾选 :) - at.

使用反引号的特定原因是什么？单引号可行吗？ - djangofan

不，你需要使用反引号。这是 echmascript（javascript）知道如何将变量注入 ${} 位置的方式。单引号只表示普通字符串，并且会被解释为这样的字符串。 - Nick Brady

Answer 2

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 

- tjcafferkey

---

很确定你不小心调换了变量。按照你的写法，我会期望它将str设置为"My username is Github on tjcafferkey"。 - Danny

很好的发现。我在示例中把它们搞反了。 - tjcafferkey

Answer 3

在JavaScript中，这是可以的。然而，没有一个很好的内置等价于sprintf或String.format，但是你可以自己构建。

不要担心“不必要”的字符串对象。那绝对是微观优化。如果需要额外的微小性能或内存优化时再考虑它，但在分布式软件中，你可能不需要这样做。

- Nicole

---

此外，如果这是一个非常普遍的性能问题，我会期望JS实现已经对其进行了优化。我知道Java编译器会进行这样的优化。 - zch

Answer 4

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

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

当然，这需要通过基准测试/分析来支持，但是在每帧创建许多字符串通常会产生不必要的垃圾，从而导致后续出现卡顿问题。

- Wyatt

---

真的有一个JS解释器不会内联所有原始字符串吗？我觉得这可能在某些浏览器上会更慢，因为现在引擎必须检查可能已更改的preX（等等）变量，而无法更改字符串文字。 - Platinum Azure

同意，我会预期它会更慢。然而，我的情况是特定于每帧引用相同的字符串文字数百次（比如在具有许多动态标记点的可视化中）。优化的查找速度影响（仅将索引到给定偏移量）可能不会超过为每个文字创建字符串所需的时间。我想您是正确的，即这些文字都经过了一定程度的优化，但这因浏览器而异，使依赖该行为实现的代码实现因浏览器而异。 - Wyatt