JS的字符串日常处理

JavaScript-基本包装类：【String】类型处理

String类型是字符串的对象包装类型

---

---

前言

日常使用过程中都会在不经意中使用到，这次来做一个总结，知识点再回顾一遍。

---

一、获取字符串长度

每个实例都有一个length属性

const str = 'sapper'
console.log(str.length)   // 输出结果：6

---

二、获取字符串指定位置值

charAt()和charCodeAt()：访问字符串中特定的字符的方法

两个方法都是接收一个参数，即基于0的字符位置

1.charAt()

以单字符字符串的形式返回指定位置的那个字符 string.charAt(index)：string -> 字符串 \ index- > 字符串中的索引值

const str = 'sapper'
console.log(str.charAt(1))   // 输出结果：a

我们日常大部分编写的时候为了方便直接通过索引值获取对应的字符，不由得发问，它和charAt的区别又是什么？
如下，当index的取值不在str的长度范围内时：str[index] 会返回 undefined 而 charAt(index) 会返回 空字符串

const str = 'sapper'
console.log(str.[1])   // 输出结果：a
console.log(str.charAt(1]))   // 输出结果：a
console.log(str.[6])   // 输出结果：undefined
console.log(str.charAt(6]))   // 输出结果：''

注意：IE8及其大部分主流浏览器已经支持str[index]，IE7及更早版本使用该语法会直接返回undefined，尽管根本不是特殊的undefined值

2.charCodeAt()

该方法会返回指定索引位置字符的Unicode值，返回值是0-65535(2^16 - 1)之间的整数，表示给定索引处的 UTF-16 代码单元，如果指定位置没有字符，将返回NaN

const str = 'sapper'
console.log(str.charCodeAt(1))   // 输出结果：97

通过这个方法，可以获取字符串中指定Unicode编码值范围的字符。比如，数字0～9的Unicode编码范围是: 48～57，可以通过这个方法来筛选字符串中的数字

---

三、字符串检索子字符串

1.includes()【常用】

执行区分大小写的搜索，以确定是否可以在一个字符串中找到另一个字符串，并根据情况返回：
找到了要搜索的字符串（包括 searchString 为空字符串的情况） true 否则返回 false

语法：

includes(searchString) // searchString是需要在 str 中搜索的字符串。不能是正则表达式
includes(searchString, position) // position是在字符串中开始搜索 searchString 的位置。默认值为 0。【可选】

示例1：
区分大小写

"Blue Whale".includes("blue"); // 返回 false

可通过将原字符串和搜索字符串全部转换为小写来解决这个约束：

"Blue Whale".toLowerCase().includes("blue"); // 返回 true

示例2：
默认搜索位置：0

const str = "To be, or not to be, that is the question.";
console.log(str.includes("To be")); // true
console.log(str.includes("To be", 1)); // false

示例3：
searchString 为空字符串

console.log(str.includes("")); // true

2.startsWith()

用来判断当前字符串是否以另外一个给定的子字符串开头，并且区分大小写，同时，根据情况返回true 否则返回 false。
属性和规避规则和上方Includes()如出一辙

const str = "To be, or not to be, that is the question.";

console.log(str.startsWith("To be")); // true
console.log(str.startsWith("not to be")); // false
console.log(str.startsWith("not to be", 10)); // true

3.endsWith()

用于判断一个字符串是否以指定字符串结尾，根据情况返回true 否则返回 false。

语法：

includes(searchString) // searchString是需要在 str 中搜索的字符串。不能是正则表达式
includes(searchString, endPosition) // endPosition是在字符串中开始搜索 searchString 的位置。默认值为 str.length。【可选】

示例：

const str = "生存还是毁灭，这是一个问题。";

console.log(str.endsWith("问题。")); // true
console.log(str.endsWith("毁灭")); // false
console.log(str.endsWith("毁灭", 6)); // true

4.indexOf()【常用】

在字符串中搜索指定子字符串，并返回其第一次出现的位置索引。它可以接受一个可选的参数指定搜索的起始位置，如果找到了指定的子字符串，则返回的位置索引大于或等于指定的数字，如果没有找到，则返回 -1。

语法：

indexOf(searchString) // searchString是需要在 str 中搜索的字符串。
indexOf(searchString, position) // position是在字符串中开始搜索searchString的位置。默认值为0，最大值合法值为str.length。【可选】

示例1：
searchString 为空字符串
第二个参数的值【小于】调用字符串的长度，则返回值与第二个参数的值相同，默认为0的时候返回0。

"hello world".indexOf(""); // 返回 0
"hello world".indexOf("", 0); // 返回 0
"hello world".indexOf("", 3); // 返回 3
"hello world".indexOf("", 8); // 返回 8

第二个参数的值【大于或等于】字符串的长度，则返回值是字符串的长度

"hello world".indexOf("", 11); // 返回 11
"hello world".indexOf("", 13); // 返回 11
"hello world".indexOf("", 22); // 返回 11

示例2：
区分大小写

"Blue Whale".indexOf("blue"); // 返回 -1

示例3：
检测指定字符串是否存在
当检查字符串中是否出现特定的子字符串时，正确的检查方法是测试返回值是否为 -1：

"Blue Whale".indexOf("Blue") !== -1; // true；在 'Blue Whale' 中找到 'Blue'
"Blue Whale".indexOf("Bloe") !== -1; // false；'Blue Whale' 中不存在 'Bloe'

5.lastIndexOf()

搜索该字符串并返回指定子字符串最后一次出现的索引。它可以接受一个可选的起始位置参数，并返回指定子字符串在小于或等于指定数字的索引中的最后一次出现的位置，如果找到了 searchString，则返回最后一次出现的索引，否则返回 -1

语法：

lastIndexOf(searchString) // searchString是需要在 str 中搜索的字符串。
lastIndexOf(searchString, position) // position符串在小于或等于 position 的位置中的最后一次出现的索引，默认为 +Infinity(无穷大)【可选】

如果 position 大于调用字符串的长度，则该方法将搜索整个字符串。如果 position 小于 0，则行为与 0 相同，即该方法只在索引 0 处查找指定的子字符串。
示例1：
小于调用字符串的长度

'hello world hello'.lastIndexOf('world', 4) // 返回 -1

示例2：
大于调用字符串的长度

'hello world hello'.lastIndexOf('hello', 99) // 返回 12

示例3：
小于0

'hello world hello'.lastIndexOf('hello', 0)  // 返回 0
'hello world hello'.lastIndexOf('hello', -5) // 返回 0

示例4：
indexOf() 和 lastIndexOf()的区别

const anyString = "Brave, Brave New World";

console.log(anyString.indexOf("Brave")); // 0
console.log(anyString.lastIndexOf("Brave")); // 7

上方5个方法都可以用来：检索一个字符串中是否包含特定的序列。
includes()、startsWith()、endsWith()这三个方法返回的是布尔值，表示是否匹配到指定的值。
indexOf() 和 lastIndexOf()这两个方法得到的指定元素的索引值，并且只会返回第一次匹配到的值的位置。

---

四、连接/拼接字符

1.concat()

将字符串参数连接到调用的字符串，并返回一个新的字符串。

concat() 方法与加号/字符串连接运算符（+，+=）非常相似，不同之处在于 concat() 直接将其参数强制转换为字符串进行连接，而加号运算符首先将其操作数强制转换为原始值，然后再进行连接

语法：

concat(str1)
concat(str1, str2)
concat(str1, str2, /* …, */ strN) // strN：要连接到 str 的一个或多个字符串。

示例1：
普通使用

const hello = "Hello, ";
console.log(hello.concat("Kevin", ". Have a nice day.")); // Hello, Kevin. Have a nice day.
console.log(hello); // hello

const greetList = ["Hello", " ", "Venkat", "!"];
"".concat(...greetList); // "Hello Venkat!"

示例2：
特殊使用

"".concat({}); // "[object Object]"
"".concat([]); // ""
"".concat(null); // "null"
"".concat(true); // "true"
"".concat(4, 5); // "45"

---

五、字符串分割成数组

1.split()【常用】

语法：

省略separator或传递undefined会导致split()返回一个只包含所调用字符串数组。所有不是undefined的值或不具有@@split方法的对象都被强制转换为字符串

split(separator) // 是undefined、一个字符串、具有 Symbol.split 方法的对象【正则表达式】
split(separator, limit) // 是一个非负整数，指定数组中包含的子字符串的数量限制

当提供limit参数时，split 方法会在指定 separator 每次出现时分割该字符串，但在已经有 limit 个元素时停止分割。任何剩余的文本都不会包含在数组中

• 如果在达到极限之前就达到了字符串的末端，那么数组包含的条目可能少于 limit。
• 如果 limit 为 0，则返回 []。

示例1：
详情描述
当字符串为空并且指定了一个非空的分隔符，split() 返回 [“”]。如果字符串和分隔符都是空字符串，将返回一个空数组

const emptyString = "";

// 字符串是空的，分隔符是非空的
console.log(emptyString.split("a"));  // [""]

// 字符串和分隔符都是空的
console.log(emptyString.split(emptyString));  // []

示例2：
普通使用

const monthString = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";

console.log(monthString.split('')); // 每个字符都被分割
// ["J", "a", "n", ",", "F", "e", "b", ",", "M", "a", "r", ",", "A", "p", "r", ",", "M", "a", "y", ",", "J", "u", "n", ",", "J", "u", "l", ",", "A", "u", "g", ",", "S", "e", "p", ",", "O", "c", "t", ",", "N", "o", "v", ",", "D", "e", "c"]

console.log(monthString.split(',')); // 指定字符被分割
// ["Jan", "Feb", "Mar", "Apr", "May, "Jun", "Jul", "Aug", "Sep, “Oct”, “Nov”, “Dec"]

console.log(monthString.split(undefined));
// ["Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec"]

console.log(monthString.split(",",3)); // 限制返回值中分割元素数量
// ["Jan", "Feb", "Mar"]

示例3：
特殊使用

---

六、截取字符串

1.slice()【常用】

提取字符串的一部分，并将其作为新字符串返回，而不修改原始字符串，提取直到但不包括 indexEnd 的文本。

语法：

slice(indexStart) // indexStart是要返回的子字符串中包含的第一个字符的索引
slice(indexStart, indexEnd) // indexEnd是要返回的子字符串中排除的第一个字符的索引

示例：

const str1 = "The morning is upon us."; // str1 的长度是 23。

console.log(str1 .slice(5, 2)); // ""

console.log(str1.slice(30)); // indexStart >= str.length，则返回一个空字符串
// ""

console.log(str1.slice(1, 8)); // 正常普通使用
// he morn

console.log(str1.slice(4, -2)); // 如果 indexEnd < 0，子字符串在 max(indexEnd + str.length, 0) 处结束
// morning is upon u

console.log(str1.slice(-3); // 如果 indexStart < 0，子字符串从 max(indexStart + str.length, 0) 开始
// 'us.'

console.log(str1.slice(-3, -1)); // 两者都为负数时
// 'us'

console.log(str.slice(-11, 16)); // 从字符串末尾倒数 11 个字符来找到起始索引，并通过从字符串开头正数 16 个字符来找到结束索引
// "is u"

console.log(str1.slice(20, -10)); // 两者交集
// undefined

注意，该方法返回的子串包括开始处的字符，但不包括结束处的字符。

2.substring()

返回该字符串从起始索引到结束索引（不包括）的部分，如果未提供结束索引，则返回到字符串末尾的部分。

语法：

substring() 方法从 indexStart 开始提取字符，直到（但不包括）indexEnd。具体来说：

• 如果省略了 indexEnd，则 substring() 提取字符直到字符串的末尾。
• 如果 indexStart 等于 indexEnd，则 substring() 返回一个空字符串。
• 如果 indexStart 大于 indexEnd，则 substring() 的效果就像交换了这两个参数一样；请参考下面的示例。
  任何值为 NaN 的参数将被视为等于 0。
  任何小于 0 或大于 str.length 的参数值都会被视为分别等于 0 和 str.length。

slice(indexStart) // indexStart是要返回的子字符串中包含的第一个字符的索引
slice(indexStart, indexEnd) // indexEnd是要返回的子字符串中排除的第一个字符的索引

示例1：
indexStart 大于 indexEnd 时，互相交互的效果

const anyString = "Mozilla";

console.log(anyString.substring(0, 1)); // 'M' 正常理解
console.log(anyString.substring(1, 0)); // 'M' 互相交换

示例2：
indexStart 大于 indexEnd 时，互相交互的效果

const text = "Mozilla";

console.log(anyString.substring(0, 7)); // 'Mozilla' 静态数据长度
console.log(anyString.substring(0, 10)); // 'Mozilla' 当大过当前字符长度时，获取到最后一个

// 动态
// 获取字符串的最后 4 个字符
console.log(text.substring(text.length - 4)); // 打印“illa”

// 获取字符串的最后 5 个字符
console.log(text.substring(text.length - 5)); // 打印“zilla”

3.substring() 和 slice() 之间的区别*

substring()和 slice() 方法几乎相同，但在处理负数参数时有一些细微差别。

• indexStart 大于 indexEnd 时

const text = "Mozilla";
console.log(text.substring(5, 2)); // "zil"
console.log(text.slice(5, 2)); // ""

• 如果两个参数中的任何一个或两个都是负数或 NaN，substring() 方法将把它们视为 0。

const text = "Mozilla";
console.log(text.substring(-5, 2)); // "Mo"
console.log(text.substring(-5, -2)); // ""

• slice() 方法也将 NaN 参数视为 0，但当给定负值时，它会从字符串的末尾开始反向计数以找到索引。

console.log(text.slice(-5, 2)); // ""
console.log(text.slice(-5, -2)); // "zil"

---

总结

最近经常操作字符串，想着统一写一篇，巩固一下，在掘金上观察到写的比较舒服的一篇文章，同时也去官网去同步了一下最新的用法。

参考思路来源：
稀土掘金的CUGGZ
String-JavaScript | MDN官方文档