JavaScript字符串：串联

“Concatenation” is the process of joining things together. In JavaScript, concatenation is most commonly used to join variable values together, or strings with other strings, to form longer constructions.

“串联”是将事物连接在一起的过程。 在JavaScript中 ，串联最常用于将变量值连接在一起，或将字符串与其他字符串连接在一起以形成更长的结构。

Somewhat confusingly, the most common JavaScript concatenation operator is +, the same as the addition operator. A few examples:

令人困惑的是，最常见JavaScript串联运算符是+ ，与加法运算符相同。 一些例子：

基本串联 (Basic Concatenation)

var title = "We wish " + "to be friends";
console.log(title);

Result in the console:

结果在控制台中 ：

> We wish to be friends

Note the extra space added to the first string; JavaScript won’t automatically add a space when it concatenates. Alternatively, we could do something like this:

注意添加到第一个字符串的额外空间； JavaScript串联时不会自动添加空格。 另外，我们可以做这样的事情：

var welcome = "Come sit";
var direction = "by the hearth";
console.log(welcome + " " + direction);

> Come sit by the hearth

Template literals are an alternative concatentation process; amoung other advantages, they can create more readable code in some cases.

模板文字是一个替代的合并过程。 除了其他优点，它们还可以在某些情况下创建更具可读性的代码。

将事物串联起来 (Concatenating Things to Themselves)

It’s not unusual to set a variable to a string, then later want to add another string to the existing content. With the += assignment operator, we can do just that:

将变量设置为字符串，然后在以后的内容中添加另一个字符串是很正常的。 使用+ = 赋值运算符 ，我们可以做到这一点：

var welcome = "Good ";
var time = "evening";
welcome += time;
console.log(welcome);

> Good evening

Note that the value of the welcome variable will be permanently altered by this process.

请注意，此过程将永久更改welcome变量的值。

不同的笔触：concat (Different Strokes: concat)

The concat method also joins together strings:

concat方法还将字符串连接在一起：

var oneDay = "One day I met ";
var riddle = oneDay.concat("a man ","going to St. Ives.");
console.log(riddle);

> One day I met a man going to St. Ives.

Note that the spaces must still be included in the string components in order for them to reflected in the final string result. You could also start a .concat method from nothing, joining new strings to it:

请注意，空格仍必须包含在字符串组件中，以便它们反映在最终的字符串结果中。 您也可以从零开始创建.concat方法，并在其中加入新的字符串：

var riddle = "".concat("The man had ", "seven wives");

As a rule, concat should be avoided where possible, as it is significantly slower than using the + or += operators.

通常，应尽可能避免使用concat ，因为它比使用+或+=运算符要慢得多。

加入 (join)

The join method concatenates all the elements of an array into a string. If we have an array cats:

join方法将数组的所有元素连接成一个字符串 。 如果我们有一个数组cats ：

var cats = ['Artemis', 'Catbus', 'Duchess', 'Figaro', 'Kuroneko-sama', 'Scratchy'];
var joinedNames = cats.join();
console.log(joinedNames);

> "Artemis,Catbus,Duchess,Figaro,Kuroneko-sama,Scratchy"

Note that .join automatically joins the elements together the comma separator used in the array itself. That behaviour can be changed to any separator you wish, including spaces:

请注意， .join自动将元素连接在一起，而数组本身使用逗号分隔符。 该行为可以更改为所需的任何分隔符，包括空格：

var joinedNames = cats.join(' ');

> "Artemis Catbus Duchess Figaro Kuroneko-sama Scratchy"

Again, join() is significantly slower than the standard + operator, and should be avoided where possible.

同样， join()比标准+运算符要慢得多，因此应尽可能避免使用。

The opposite of join() is, not surprisingly, split().

不出所料， join()的反义词是split() 。

串联混乱 (Concatenation Confusions)

New JavaScript coders often make a common (and confusing) error with concatenation. A good example is the following:

新JavaScript编码人员通常会在连接时产生常见(且令人困惑)的错误。 一个很好的例子如下：

var a = 10;
var b = 20;
console.log('Total is ' + a + b);

You might expect the result to be 30. Instead, you’ll find:

您可能希望结果为30。相反，您会发现：

> Total is 1020

What’s going on? The unexpected result is due to the fact that JavaScript is concatenating the text with the variable rather than adding the variables together first.

这是怎么回事？ 出乎意料的结果是由于JavaScript将文本与变量连接在一起，而不是先将变量加在一起。

In JavaScript, numbers joined to a string result in a string, not a number.

在JavaScript中，将数字连接到字符串会生成字符串，而不是数字。

It does this because JavaScript executes from left to right by default, meaning that if we could slow JavaScript execution to a crawl, we would see the order of operations as:

这样做是因为默认情况下 ， JavaScript从左到右执行 ，这意味着如果我们可以将JavaScript的执行速度减慢到爬网，我们将看到以下操作顺序：

> Total is 10
> Total is 1020

We solve the problem by wrapping the parts we want to be added together first in parentheses:

我们通过将希望首先添加的部分包装在括号中来解决该问题：

console.log('Total is ' + (a + b));

The result is now what we expect:

现在的结果就是我们所期望的：

> Total is 30

翻译自: https://thenewcode.com/1017/JavaScript-Strings-Concatenation