前端数据处理（基础篇）字符串

本文参考各位大佬的优秀文章，提取其中经常用到的一些方法，记录为笔记，便于自查和复习。文末的参考资料中附上原文链接，便于大家进一步学习。

本篇介绍的是前端数据处理中，对字符串的相关操作，包括：拼接、截取/分隔、查找、替换、转换大小写。文中有些地方，我的理解可能不那么准确，希望大家指正一下哈！

字符串的操作

拼接

在JavaScript中，有多种方法可以进行字符串的拼接。包括：使用加号（+）操作符、模板字符串、使用字符串的 concat 方法、使用数组的 join 方法、使用 += 运算符等等。接下来展示部分常用的方法。

使用模板字符串

模板字符串则使用反引号（`）包裹字符串，并使用${xx}来插入变量或表达式。

js 复制代码

 const str1 = "Hello";
 const str2 = "World";
 const result = `${str1} ${str2}`;
 console.log(result); // 输出：Hello World

使用数组的 join 方法

join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。

js 复制代码

 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，则返回空字符串。

js 复制代码

 var fruits = [];
 var energy = fruits.join("-");
 console.log(typeof (energy)); // 输出：string

使用字符串的 concat 方法

concat() 方法用于连接两个或多个字符串。该方法不会改变原有字符串，但是会返回连接两个或多个字符串新字符串。

js 复制代码

 var str1 = "Hello";
 var str2 = "World";
 var result = str1.concat(" ", str2); // 结果为 "Hello World"

值得注意的是，在JavaScript中，concat方法不仅用于字符串拼接，还可用于数组拼接

数组：JavaScript concat() 方法 | 菜鸟教程 (runoob.com)
字符串：JavaScript concat() 方法 | 菜鸟教程 (runoob.com)

截取/分割

注意：

一定要搞清楚split()、substring()以及slice()之间的区别

substr() 方法已经弃用，因此不再介绍

slice() 和 substring() 接收的都是起始位置和结束位置(不包括结束位置)

字符串➡️字符串数组 split

格式：string.split(separator, limit)

参数	描述
separator	可选。字符串或正则表达式，从该参数指定的地方分割 string Object。
limit	可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

split() 方法用于把一个字符串分割成字符串数组。并且，该方法方法不会改变原始数组。

js 复制代码

 var a = "abcd"
 const b = a.split("");
 console.log(b, b.length, typeof(b)); // 输出：[ 'a', 'b', 'c', 'd' ] 4 object

使用一个字符作为分隔符:

js 复制代码

 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?' ]

从某处截取到某处 substring

字符串截取：使用substring()方法可以截取字符串的一部分。
使用 start（包含）和 end（不包含）参数来指定字符串提取的部分。

js 复制代码

 // 格式：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，你得认真的学一学，不然容易混淆！

JavaScript Array slice()方法

JavaScript String slice()方法

对于字符串：

slice(start, end) 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
使用 start（包含）和 end（不包含）参数来指定字符串提取的部分。

js 复制代码

 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() 方法不会改变原始数组。

js 复制代码

 // array.slice(start, end)
 var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
 console.log(fruits.slice(1, 3));  // 输出：[ 'Orange', 'Lemon' ]

查找

indexOf()

使用indexOf()方法返回指定文本在字符串中第一次出现（的位置）的索引。

js 复制代码

 var str = "Hello World";
 var index = str.indexOf("World");
 console.log(index); // 输出：6

lastIndexOf()

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

js 复制代码

 var str = "Hello World";
 var index = str.lastIndexOf("o");
 console.log(index); // 输出：7

注意：

虽然是指最后一次出现，但不能倒着从d l r o这样开始数

如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：

这两种方法都接受第二个参数作为搜索的开始位置：

js 复制代码

 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() 方法在字符串中搜索指定值并返回匹配的位置：

js 复制代码

 let str = "Please locate where 'locate' occurs!";
 console.log(str.search("locate")); // 输出：7

search() 和 indexOf() 的区别

search() 方法不能接受第二个起始位置参数。
indexOf() 方法不能采用强大的搜索值（正则表达式）。但是，search() 方法却可以。

字符串➡️字符串数组 match

match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

js 复制代码

 let str = "The rain in SPAIN stays mainly in the plain";
 console.log(str.match(/ain/g));    
 // 输出：[ 'ain', 'ain', 'ain' ]

更多详细介绍请参考文章：正则之match方法详解

替换

局部替换

字符串替换：使用replace()方法可以将字符串中的某个子串替换为另一个字符串。

js 复制代码

 var str = "Hello World";
 var result = str.replace("World", "JavaScript");
 console.log(result); // 输出：Hello JavaScript

注意：replace函数一次只能替换一个目标字符串

replace()方法还能使用正则表达式

js 复制代码

 // 不区分大小写将字符串中的 Microsoft 替换为 Runoob :
 let str = "Visit Microsoft!";
 console.log(str.replace(/microsoft/i, "Runoob"));
 // 输出：Visit Runoob!

全部替换

（1）replace可以配合while循环替换所有字符串：

js 复制代码

 var str = "一个中国北方的中国人在做中国结";
 while (str.indexOf("中国") != "-1") {
     str = str.replace("中国", "");
 }
 console.log(str); // 输出：一个北方的人在做结

（2）使用正则表达式

js 复制代码

 'aabbccda'.replace(/a/g, '*'); // "**bbccd*"

（3）字符串的split方法

js 复制代码

 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抛出错误。

js 复制代码

 'aabbccda'.replaceAll('a', '*'); // "**bbccd*"
 
 'aabbccda'.replaceAll(/a/, '*'); // Uncaught TypeError: String.prototype.replaceAll called with a non-global RegExp argument

转换大小写

字符串转换：使用toUpperCase()方法可以将字符串转换为大写，使用toLowerCase()方法可以将字符串转换为小写。

js 复制代码

 var str = "Hello World";
 var upperCase = str.toUpperCase();
 var lowerCase = str.toLowerCase();
 console.log(upperCase); // 输出：HELLO WORLD
 console.log(lowerCase); // 输出：hello world

参考资料

有些资料的链接附在文中，有些放在此处：