前端开发：JS 中字符串拼接的总结

前言

在前端开发过程中，关于字符串拼接或者连接是非常常用的知识点，尤其是在处理数据之后进行页面渲染。虽然关于字符串的拼接不是什么难的知识点，但是由于它比较常用，而且也比较重要，所以本篇博文就来详细的介绍一下关于 JS 中字符串拼接的使用，方便查阅使用。

字符串拼接方法

JS 中字符串拼接的方法有四种：使用加号运算符拼接、使用 ${} 结合反引号拼接、使用 JS 的 concat() 函数拼接、使用 JS 的 join() 函数拼接。这四种方式的使用具体如下文所示。

一、加号运算符

使用加号运算符连接/拼接字符串是最简便的方式。下面通过示例来介绍一下加号运算符连接两个字符串的方法，具体如下所示。

示例一：

var str1 = "Hello," ;
var str2 = "World!";
console.log(str1 + str2);  //输出结果：“Hello,World!”

示例二：

let tempStr = ""; 
  let fruits = ["Apple", "Banana","Cherry", "Durian", "Orange"];  //水果昵称的数组
  for (i = 0; i < fruits.length; i++) {  //for循环遍历数组中的每个元素
      if (fruits[i] === "Cherry"){
         tempStr = "Cherry元素在数组中的索引为：" + i;  //使用加号运算符连接/拼接
      };
  } 
  console.log(tempStr);  //输出结果为：Cherry元素在数组中的索引为：2

最后，通过使用加号运算符做拼接/连接操作，虽然是比较简便的方式，但是也有要求，那就是使用加号运算符做拼接/连接操作只适用于连接 100 个以下的字符串操作最方便。

二、使用 ${}结合反引号

使用 ${} 结合反引号来连接/拼接字符串的使用，具体示例如下所示：

let tempStr = ""; 
  let fruits = ["Apple", "Banana","Cherry", "Durian", "Orange"];  //水果昵称的数组
  for (i = 0; i < fruits.length; i++) {  //for循环遍历数组中的每个元素
      if (fruits[i] === "Cherry"){
         tempStr = `Cherry元素在数组中的索引为：${i}`;  //使用${}结合反引号连接/拼接
      };
  } 
  console.log(tempStr);  //输出结果为：Cherry元素在数组中的索引为：2

注意：反单引号打出来的方法：把电脑输入法调整为英文输入法，接着按下键盘左上角的 ESC 键的下面的按键 "`~” 键。切记用的是反单引号，不是单引号！

三、concat()方法

通过使用 concat() 方法也可以做连接/拼接字符串的使用。 concat() 方法在 JS 中也是比较常用的方法，它不仅可以连接字符串也可以连接数组，这里仅介绍 concat() 方法连接两个字符串的特性，具体详情如下所示。

1、定义和用法

concat() 方法用于连接两个或多个字符串。

注意：该方法没有改变原有的字符串，但是它会返回连接两个或多个字符串后的新字符串。

2、语法

stringObject.concat(string1,string2,…,stringX)

3、参数描述

4、返回值

说明：concat() 方法将把它的所有参数转换成字符串，然后按顺序连接到字符串 stringObject 的尾部，并返回连接后的新的字符串。stringObject 本身并没有被修改。

5、使用示例

这里的示例以通过 concat() 方法将两个单独的字符串拼接成一个新的字符串，具体代码如下所示：

示例一：

var str1="Hello,";
var str2="World!";
console.log(str1.concat(str2)); //输出结果：“Hello,World!”

示例二：

let tempStr = ""; 
  let fruits = ["Apple", "Banana","Cherry", "Durian", "Orange"];  //水果昵称的数组
  for (i = 0; i < fruits.length; i++) {  //for循环遍历数组中的每个元素
      if (fruits[i] === "Cherry"){
         tempStr = "Cherry元素在数组中的索引为："; 
tempStr = tempStr.concat(i) ;  //使用concat() 方法连接/拼接字符串
      };
  } 
  console.log(tempStr);  //输出结果为：Cherry元素在数组中的索引为：2

最后，使用 JS 中字符串的 concat() 方法可以把多个参数拼接到指定字符串的尾部，该方法的参数类型和个数没有限制，它会把所有参数都转换为字符串，然后按顺序连接 / 拼接到当前字符串的尾部，最后返回连接 / 拼接后的新的字符串。concat() 方法不会修改原始字符串的值，这与数组的 concat() 方法操作很相似。

四、join()方法

通过使用 join() 方法也可以做连接/拼接字符串的使用。不过通过使用 join() 方法只能是将一个数组的全部元素合并为一个字符串，也就是 join() 方法通过分隔符将一个数组的所有元素合并为一个字符串。

关于 join() 方法的使用，在之前的博文中有单独的讲解，这里就不在详细介绍 join() 方法的详情，这里只做 join() 方法的示例使用，具体如下所示：

示例一：

   let array = new Array('aaa', 'bbb', 'ccc', 'ddd');
   let joinStr = array.join('|');
   console.log(joinStr);  //输出结果： aaa|bbb|ccc|ddd  ---string类型，如给后台传参的时候需要用逗号隔开

示例一变种：

let array=new Array();
array.push('aaa');
array.push('bbb');
array.push('ccc');
array.push('ddd');
let joinStr2 =array.join('|')
console.log(joinStr2); //输出结果： aaa|bbb|ccc|ddd   -----这种方法要比示例一消耗更少的资源，速度也更快

示例二：

let tempStr = ""; 
let tempArray = [];
  let fruits = ["Apple", "Banana","Cherry", "Durian", "Orange"];  //水果昵称的数组
  for (i = 0; i < fruits.length; i++) {  //for循环遍历数组中的每个元素
      if (fruits[i] === "Cherry"){
         tempArray.push("Cherry元素在数组中的索引为：",i);  //使用push把元素添加到空数组中
tempStr = tempArray.join('') ;  //使用join() 方法连接/拼接字符串
      };
  } 
  console.log(tempStr);  //输出结果为：Cherry元素在数组中的索引为：2

最后，在一些特定的操作情况下可以使用 join() 方法来连接/拼接字符串，如 html 字符串输出的时候。使用数组的 join() 方法来连接超大字符串的时候，速度会很快，是推荐的最佳方法。

拓展：JS 中字符串拼接使用逗号","

在 JS 中对字符串拼接/连接，通过使用逗号","也可以实现，具体操作如下所示：

var a = "Hello" ;
a += ",World!";
console.log(a) //输出结果：“Hello,World!”

最后

通过上面介绍的 JS 中字符串拼接的使用总结，是不是彻底掌握了相关知识点以及使用原理？这个知识点很重要，只要完全掌握其原理之后不管以后在前端开发过程中有关字符串拼接的使用，都能轻松应对，这里不再过多赘述重要性。

链接: https://fly63.com/article/detial/11902