本文参考各位大佬的优秀文章，提取其中经常用到的一些方法，记录为笔记，便于自查和复习。文末的参考资料中附上原文链接，便于大家进一步学习。
本篇介绍的是前端数据处理中，对字符串的相关操作，包括：拼接、截取/分隔、查找、替换、转换大小写。文中有些地方，我的理解可能不那么准确，希望大家指正一下哈！
字符串的操作
拼接
在JavaScript中，有多种方法可以进行字符串的拼接。包括：使用加号（+）操作符、模板字符串、使用字符串的 concat 方法、使用数组的 join 方法、使用 += 运算符等等。接下来展示部分常用的方法。
使用模板字符串
模板字符串则使用反引号（`）包裹字符串，并使用${xx}来插入变量或表达式。
const str1 = "Hello";
const str2 = "World";
const result = `${str1} ${str2}`;
console.log(result); // 输出：Hello World
使用数组的 join 方法
join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。
const fruits = ["Banana", "Orange", "Apple", "Mango"];
// 默认状态下，不输入分隔符
fruits.join(); // 输出：Banana,Orange,Apple,Mango
// 分隔符为空格
fruits.join(" "); // 输出：Banana Orange Apple Mango
// 分隔符为 -
fruits.join("-"); // 输出：Banana-Orange-Apple-Mango
如果 arr.length 为 0，则返回空字符串。
var fruits = [];
var energy = fruits.join("-");
console.log(typeof (energy)); // 输出：string
使用字符串的 concat 方法
concat() 方法用于连接两个或多个字符串。该方法不会改变原有字符串，但是会返回连接两个或多个字符串新字符串。
var str1 = "Hello";
var str2 = "World";
var result = str1.concat(" ", str2); // 结果为 "Hello World"
值得注意的是，在JavaScript中，concat方法不仅用于字符串拼接，还可用于数组拼接
截取/分割
注意：
- 一定要搞清楚
split()、substring()以及slice()之间的区别- substr() 方法已经弃用，因此不再介绍
- slice() 和 substring() 接收的都是起始位置和结束位置(不包括结束位置)
从某处截取到某处 substring
- 字符串截取：使用
substring()方法可以截取字符串的一部分。 - 使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。
// 格式：substring(start, stop) ;
var str = "Hello World";
var result = str.substring(6, 11);
console.log(result, typeof (result)); // 输出：World string
// 从下标为0的位置开始截取到下标为1的位置的值（不包括下标为1的值）
console.log(str.substring(0, 1)); // 输出：H
// 从下标为2的位置开始，截取到最后的值
console.log(str.substring(2)); // 输出：llo World
// 如果 start 和 stop 有负数，那么会把该参数自动转为0
console.log(str.substring(-1)); // 输出：Hello World
substring参数说明:
| 参数 | 说明 |
|---|---|
| start | 必需。一个非负的整数，规定要提取的子串的第一个字符在 string 中的位置。 |
| stop | 可选。一个非负的整数，比要提取的子串的最后一个字符在 string 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
容易混淆的 slice方法
关于slice，你得认真的学一学，不然容易混淆！
对于字符串：
slice(start, end)方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。- 使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。
var str = "Hello world!";
console.log(str.slice(1, 5)); // 输出：ello
// 提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）
console.log(str.slice(-2)); // 输出：d!
slice参数说明:
| 参数 | 描述 |
|---|---|
start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
end | 可选。紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。 |
对于数组：
- slice() 方法可从已有的数组中返回选定的元素，从 start（包括该元素） 到 end （不包括该元素）
- slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
- slice() 方法不会改变原始数组。
// array.slice(start, end)
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(1, 3)); // 输出：[ 'Orange', 'Lemon' ]
查找
indexOf()
使用indexOf()方法返回指定文本在字符串中第一次出现（的位置）的索引。
var str = "Hello World";
var index = str.indexOf("World");
console.log(index); // 输出：6
lastIndexOf()
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
var str = "Hello World";
var index = str.lastIndexOf("o");
console.log(index); // 输出：7
注意：
- 虽然是指最后一次出现，但不能倒着从d l r o这样开始数
- 如果未找到文本，
indexOf()和lastIndexOf()都返回 -1：
这两种方法都接受第二个参数作为搜索的开始位置：
let str = "Please locate where 'locate' occurs!";
str.indexOf("locate", 15) // 返回 21
// lastIndexOf() 方法向后搜索（从末尾到开头）
// 如果第二个参数是 15，则从位置 15 开始搜索，一直搜索到字符串的开头。
str.lastIndexOf("locate") // 返回 21
str.lastIndexOf("locate", 15) // 返回 7
search()
search() 方法在字符串中搜索指定值并返回匹配的位置：
let str = "Please locate where 'locate' occurs!";
console.log(str.search("locate")); // 输出：7
search() 和 indexOf() 的区别
search()方法不能接受第二个起始位置参数。indexOf()方法不能采用强大的搜索值（正则表达式）。但是，search()方法却可以。
替换
局部替换
字符串替换：使用replace()方法可以将字符串中的某个子串替换为另一个字符串。
var str = "Hello World";
var result = str.replace("World", "JavaScript");
console.log(result); // 输出：Hello JavaScript
注意：replace函数一次只能替换一个目标字符串
replace()方法还能使用正则表达式
// 不区分大小写将字符串中的 Microsoft 替换为 Runoob :
let str = "Visit Microsoft!";
console.log(str.replace(/microsoft/i, "Runoob"));
// 输出：Visit Runoob!
全部替换
（1）replace可以配合while循环替换所有字符串：
var str = "一个中国北方的中国人在做中国结";
while (str.indexOf("中国") != "-1") {
str = str.replace("中国", "");
}
console.log(str); // 输出：一个北方的人在做结
（2）使用正则表达式
'aabbccda'.replace(/a/g, '*'); // "**bbccd*"
（3）字符串的split方法
var str = "aabbccda"
// 1.将字符串变为数组
var arr = str.split('a')
console.log(arr); // 输出：[ '', '', 'bbccd', '' ]
// 2.数组拼接为字符串
var newStr = arr.join("*")
console.log(newStr) // 输出：**bbccd*
// 简写
'aabbccda'.split('a').join('*'); // "**bbccd*"
（4）String.prototype.replaceAll
- replaceAll() 方法返回一个新字符串，新字符串所有满足 pattern 的部分都已被replacement 替换。
- 如果
regexp|substr为一个非全局的正则表达式，则replaceAll抛出错误。
'aabbccda'.replaceAll('a', '*'); // "**bbccd*"
'aabbccda'.replaceAll(/a/, '*'); // Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument
转换大小写
字符串转换：使用toUpperCase()方法可以将字符串转换为大写，使用toLowerCase()方法可以将字符串转换为小写。
var str = "Hello World";
var upperCase = str.toUpperCase();
var lowerCase = str.toLowerCase();
console.log(upperCase); // 输出：HELLO WORLD
console.log(lowerCase); // 输出：hello world
字符串转数组
match()
match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。
let str = "The rain in SPAIN stays mainly in the plain";
console.log(str.match(/ain/g));
// 输出：[ 'ain', 'ain', 'ain' ]
更多详细介绍请参考文章：正则之match方法详解
split()
格式：string.split(separator, limit)
| 参数 | 描述 |
|---|---|
| separator | 可选。字符串或正则表达式，从该参数指定的地方分割 string Object。 |
| limit | 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。 |
split() 方法用于把一个字符串分割成字符串数组。并且，该方法方法不会改变原始数组。
var a = "abcd"
const b = a.split("");
console.log(b, b.length, typeof(b)); // 输出：[ 'a', 'b', 'c', 'd' ] 4 object
使用一个字符作为分隔符:
var str="How are you doing today?";
var n=str.split("o");
console.log(n)
// 输出：[ 'H', 'w are y', 'u d', 'ing t', 'day?' ]
console.log(str1.split("H"))
// 输出：[ '', 'ow are you doing today?' ]
Array.from
Array.from辅助创建从阵列状或迭代的对象的新数组。字符串既可迭代又类似于数组，因此，可以成功地将其转换为字符数组。
const text = "abc????";
const chars = Array.from(text);
console.log(chars);
//["a", "b", "c", "????"]
扩展运算符
const text = "abc????";
const chars = [ ...text ];
console.log(chars);
//["a", "b", "c", "????"]
解构赋值
在解构数组或可迭代对象时，我们可以使用 rest 模式将其剩余部分提取到单个变量中。
const text = "abc????";
const [ ...chars ] = text;
console.log(chars);
//["a", "b", "c", "????"]
进一步学习： Javascript ES6 展开语法和解构赋值语法_js jie构和展开语法的区别
参考资料
有些资料的链接附在文中，有些放在此处：
- JS字符串拼接/连接（5种方式）_js 字符串拼接
- js 字符串拼接的4种方法_js拼接字符串拼入变量
- Array.prototype.join() - JavaScript | MDN (mozilla.org)
- 菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)
- JS字符串截取方法汇总（slice、substring、substr等）
- JavaScript Array slice() 方法 | 菜鸟教程 (runoob.com)
- js中对字符串操作的方法substring()，substring()，slice()
- JavaScript 字符串搜索 (w3school.com.cn)
- js的replace如何全部替换目标字符串_百度知道 (baidu.com)
- 都2021了，你还在用replace吗 - 掘金 (juejin.cn)
- 字符串转换为数组的4 个方法-CSDN博客
