【JS】 字符串方法汇总（工作常用）

序言

JavaScript 字符串由16位码元（code unit）组成。对于多数 字符 来说，每16位码元（相当于索引）对应一个字符。

• 重点：所有字符串方法都不会改变原始字符串

一、操作方法

1.1、去除空格 trim()

• trim()：去除首尾的空格，返回去除空格后的字符串

var str = '   hello world   ';
var res = str.trim();
console.log(str);	//    hello world   
console.log(res);	// hello world

扩展：ES6 新增去除空格方法

• trimStart()：仅去除首部的空格，与trimLeft()作用效果一样
• trimEnd()：仅去除尾部的空格，与trimRight()作用效果一样

1.2、拼接字符串 concat()

• concat()：返回拼接好的字符串

var str1 = 'hello';
var str2 = 'world';
var res = str1.concat(str2);
console.log(res);	// helloworld

1.3、 替换字符串 replace()

• replace()：替换第一个匹配的字符串，返回替换好的字符串。
• 如果要替换所有的匹配，必须使用正则表达式的g修饰符。

'aabbcc'.replace('b', '_')		// 'aa_bcc'
'aabbcc'.replace(/b/g, '_')		// 'aa__cc'

扩展：ES2021 引入了replaceAll()方法

• replaceAll()：可以一次性替换所有匹配，但是不能使用正则表达式。

'aabbcc'.replaceAll('b', '_')	// 'aa__cc'
'aabbcc'.replaceAll(/b/, '_')	// 使用正则会报错

1.4、 复刻字符串 repeat() 【ES6】

• repeat()：复刻当前字符串并返回一个新字符串

"abc".repeat(0)      // ""
"abc".repeat(1)      // "abc"
"abc".repeat(2)      // "abcabc"

"abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数.
"abc".repeat(-1)     // RangeError:重复次数必须是正的且小于无穷大
"abc".repeat(1/0)    // RangeError: 重复计数必须是正的且小于无穷大

1.5、补齐字符串 padStart / padEnd() 【ES6】

• padStart()：设置字符串长度，并从前面用指定字符补齐字符串，返回补齐以后的字符串。
• padEnd()：设置字符串长度，并从后面用指定字符补齐字符串，返回补齐以后的字符串。
• 语法参数：

string.padStart(目标长度,'填充字符串')
string.padEnd(目标长度,'填充字符串')

1. 目标长度，你想把字符串补充到多长
	-  如果小于字符串本身长度，就没有意义
	- 超过长度以后，用填充字符串补齐
2. 填充字符串，
	- 可以是一个字符
	- 多个的时候，如果超长，后面的就不要了

// padStart
var str = '1234';
var res1 = str.padStart(3,'a');
console.log(res1);	// 1234

var res2 = str.padStart(10,'a');
console.log(res2);	// aaaaaa1234

var res3 = str.padStart(6,'abcd');
console.log(res3);	// ab1234

// padEnd
var str = '1234';
var res1 = str.padEnd(3,'a');
console.log(res1);	// 1234

var res2 = str.padEnd(10,'a');
console.log(res2);	// 1234aaaaaa

var res3 = str.padEnd(6,'abcd');
console.log(res3);	// 1234ab

二、截取方法

2.1、按个数 substr()

警告： 尽管 String.prototype.substr(…) 没有严格被废弃 (as in “removed from the Web standards”), 但它被认作是遗留的函数并且可以的话应该避免使用。它并非JavaScript核心语言的一部分，未来将可能会被移除掉。如果可以的话，使用 substring() 替代它.

• substr() 方法：返回一个字符串中从指定位置开始到指定字符数的字符。
• 语法参数：

str.substr(start[, length])

1. start：开始索引
2. length：截取的个数

• 示例：

var str = "abcdefghij";
// 		   0123456789
console.log("(1,2): "    + str.substr(1,2));   // (1,2): bc
console.log("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
console.log("(-3): "     + str.substr(-3));    // (-3): hij
console.log("(1): "      + str.substr(1));     // (1): bcdefghij
console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
console.log("(20, 2): "  + str.substr(20,2));  // (20, 2):

2.2、仅正索引 substring()

• substring() 方法：返回一个字符串在开始索引到结束索引之间的一个子集，或从开始索引直到字符串的末尾的一个子集.
• 语法参数：

/*
	indexStart：开始索引
	indexEnd：结束索引
*/
str.substring(indexStart[, indexEnd])


- 包含开始索引，不包含结束索引
- 如果省略indexEnd，substring提取字符一直到字符串末尾
- 如果indexStart等于indexEnd，substring返回一个空字符串.
- 如果任一参数小于 0 或为 NaN ，则被当作 0
- 如果任一参数大于stringName.length、则被当作stringName.length
- 如果indexStart大于indexEnd、则substring的执行效果就像两个参数调换了一样

• 示例：

var anyString = "Mozilla";
// 				 0123456

// 输出 "Moz"
console.log(anyString.substring(0,3));
console.log(anyString.substring(3,0));
console.log(anyString.substring(3,-3));
console.log(anyString.substring(3,NaN));
console.log(anyString.substring(-2,3));
console.log(anyString.substring(NaN,3));

// 输出 "lla"
console.log(anyString.substring(4,7));
console.log(anyString.substring(7,4));

// 输出 ""
console.log(anyString.substring(4,4));

// 输出 "Mozill"
console.log(anyString.substring(0,6));

// 输出 "Mozilla"
console.log(anyString.substring(0,7));
console.log(anyString.substring(0,10));

2.3、正负索引 slice()

• slice() 方法：提取某个字符串的一部分，并返回一个新的字符串
• 语法参数：

/*
	beginIndex：开始索引
	endIndex：结束索引
*/
str.slice(beginIndex[, endIndex])


- 包含开始索引，不包含结束索引
- 如果省略endIndex参数，则会一直提取到字符串末尾
- 如果beginIndex值为负数，会被当做strLength + beginIndex看待，这里的strLength是字符串的长度
- 例如：如果beginIndex是-3则看作是：strLength - 3
- 如果endIndex值为负数，则被看作是strength+endIndex，这里的strength就是字符串的长度
- 例如：如果endIndex是-3，则是，Strength-3

var str = 'The morning is upon us.', // str 的长度 length 是 23。

console.log(str1.slice(1, 8)); 	// 输出：he morn
console.log(str1.slice(4, -2)); // 输出：morning is upon u
console.log(str1.slice(12)); 	// 输出：is upon us.
console.log(str1.slice(30)); 	// 输出：""
console.log(str.slice(-3));     // 返回 'us.'
console.log(str.slice(-3, -1)); // 返回 'us'
console.log(str.slice(0, -1));  // 返回 'The morning is upon us'

三、转换方法

3.1、转数组 split()

• split()：以指定字符切割字符串，并返回一个数组保存每一段内容。
• 语法参数：

string.split('切割符号',多少个)

1. 切割符号：按照你写的符号把字符串切割开来
		- 如果不写：那么就直接切割一个完整的
		- 如果写一个空字符串('')：则按照一位一位的切割
2. 多少个：选填，默认是全部，表示你切割完以后保留多少个

var str = '2020-12-12';
var res1 = str.split('-');
console.log(res1);	// ['2020','12','12']

var res2 = str.split('-',2);
console.log(res2);	// ['2020','12']

var res3 = str.split();
console.log(res3);	// ['2020-12-12']

var res4 = str.split('');
console.log(res4);	// ['2','0','2','0','-','1','2','-','1','2']

3.2、转小写 toLowerCase()

• toLowerCase()：将字符串里面的大写字母转换成小写字母，返回转换好后的字符串

var str = 'hello';

//使用 toUpperCase 转换成大写
var upper = str.toUpperCase();
console.log(upper);	// HELLO

toLocaleLowerCase()

• 与toLowerCase()用法一致
• 创造目的是为了在特地地区实现
• 比如：土耳其语的大小写转换

3.3、转大写 toUpperCase()

• toUpperCase()：将字符串里面的小写字母转换成大写字母，返回转换好后的字符串

var str = 'HELLO';

//使用 toLowerCase 转换成小写
var lower = upper.toLowerCase();
console.log(lower);	//hello

toLocaleUpperCase()

• 与toUpperCase()用法一致
• 可以额外在特地地区实现
• 比如：土耳其语的大小写转换
• 与toUpperCase()用法一致
• 可以额外在特地地区实现
• 比如：土耳其语的大小写转换

四、判断方法（返回布尔值）

4.1、是否有这个 includes() 【ES6】

• includes()：查找字符串里面是否包含指定字符串片段，返回一个布尔值

var str = 'hello world'
var res1 = str.includes('a');
console.log(res1);	// false

var res2 = str.includes('e');
console.log(res2);	// true

var res3 = str.includes('ll');
console.log(res3);	// true

4.2、是否为开头 startsWith() 【ES6】

• startsWith()：判断该字符串是不是以这个字符串片段开始的，返回一个布尔值。

var str = 'hello world';

var res1 = str.startsWith('hello');
console.log(res1);	// true

var res2 = str.startsWith('world');
console.log(res2);	// false

4.3、是否为结尾 endsWith() 【ES6】

• ecdsWith()：判断该字符串是不是以这个字符串片段结束的，返回一个布尔值。

var str = 'hello world';

var res1 = str.startsWith('hello');
console.log(res1);	// false

var res2 = str.startsWith('world');
console.log(res2);	// true

五、查找方法

5.1、正负索引 at()

• at() 方法：从一个字符串中返回指定索引的字符。
• 该方法允许正整数和负整数。负整数从字符串中的最后一个字符开始倒数。

const str = '0123'

console.log(str.at());		// "0"
console.log(str.at(0));		// "0"
console.log(str.at(-1));	// "3"

5.2、仅正索引 charAt()

• charAt() 方法：从一个字符串中返回指定索引的字符。
• 语法：

/*
	index：索引
*/
str.charAt(index)

- 如果没有提供索引，charAt() 将使用 0
- 如果有该索引，就是索引位置字符串

• 示例：

var anyString = "Brave new world";

console.log(anyString.charAt(0));	// "B"
console.log(anyString.charAt(1));	// "r"
console.log(anyString.charAt(2));	// "a"
console.log(anyString.charAt(3));	// "v"
console.log(anyString.charAt(4));	// "e"
console.log(anyString.charAt(999));	// ""

5.3、字符片段 indexOf()

• indexOf()方法：返回调用它的String对象中第一次出现的指定值的索引
• 语法：不改变原字符串

/*
	searchValue：要被查找的字符串片段
	fromIndex：开始索引
*/
str.indexOf(searchValue [, fromIndex])

- 字符串片段不能为正则表达式
- 如果没有找到，则返回-1
- 如果没有提供searchValue，searchValue会设置成'undefined'
- fromIndex的值小于0、等同于为空情况
- searchValue 是一个空字符串：fromIndex 值大于等于字符串的长度，将会直接返回字符串的长度 str.length
- searchValue 是一个空字符串：fromIndex 值小于被查找的字符串的长度，将会直接返回fromIndex值

• 示例：

"Blue Whale".indexOf("Blue")       // 返回 0
"Blue Whale".indexOf("Blute")      // 返回 -1
"Blue Whale".indexOf("Whale", 0)   // 返回 5
"Blue Whale".indexOf("Whale", 5)   // 返回 5
"Blue Whale".indexOf("", -1)       // 返回 0
"Blue Whale".indexOf("", 9)        // 返回 9
"Blue Whale".indexOf("", 10)       // 返回 10
"Blue Whale".indexOf("", 11)       // 返回 10

lastIndexOf()：从后向前在字符串里面查找指定字符串片段，用法与 indexOf() 一致

5.4、字符编码 charCodeAt()

• charCodeAt()方法返回给定索引处的UTF-16代码单元（编码）
• 语法：不改变原字符串

/*
	index：索引
*/
str.charCodeAt(index)

- 如果index不是一个数值，则默认为0
- 如果index超出范围，则返回NaN

"ABC".charCodeAt(0) // returns 65

"ABC".charCodeAt(1) // returns 66

"ABC".charCodeAt(2) // returns 67

"ABC".charCodeAt(3) // returns NaN

5.5、字符编码 codePointAt()【ES6】

Surrogate Pair是UTF-16中用于扩展字符而使用的编码方式，是一种采用四个字节(两个UTF-16编码)来表示一个字符，称作代理对。

• codePointAt() 方法返回 一个 Unicode 编码点值的非负整数。
• 语法：

/*
	index：索引
*/
str.codePointAt(index)

- 如果在索引处没找到元素则返回 undefined
- 如果index超出范围，则返回NaN

'ABC'.codePointAt(1);          // 66
'\uD800\uDC00'.codePointAt(0); // 65536

'XYZ'.codePointAt(42); // undefined

六、正则匹配

6.1、返回索引 search()

• search() 方法：执行正则表达式和 String 对象之间的一个搜索匹配。
• 语法：

/*
	regexp：一个正则表达式（regular expression）对象
*/
str.search(regexp)

- 如果匹配成功，则返回正则表达式在字符串中首次匹配项的索引; 否则，返回 -1

• 示例：

var str = "hey JudE";
// 它是第一个大写字母 J 的索引
console.log(str.search(/[A-Z]/g)); 	// 4
// 找不到 . 标点符号
console.log(str.search(/[.]/g)); 	// -1 

6.2、返回结果 match()

ES6新增：
matchAll()方法：返回一个正则表达式在当前字符串的所有匹配

• match() 方法：检索返回一个字符串匹配正则表达式的结果.
• 语法：

/*
	regexp：一个正则表达式（regular expression）对象
*/
str.match(regexp)

- 如果使用g标志，则将返回与完整正则表达式匹配的所有结果，但不会返回捕获组
- 如果未使用g标志，则仅返回第一个完整匹配及其相关的捕获组（Array）

• 示例：

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]

静态方法

String.raw()

ES6 还为原生的 String 对象，提供了一个raw()方法。可以作为处理模板字符串的基本方法，它会将所有变量替换，而且对斜杠进行转义，方便下一步作为字符串来使用

• 该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串

String.raw`Hi\n${2+3}!`
// 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"

String.raw`Hi\u000A!`;
// 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

• 如果原字符串的斜杠已经转义，那么String.raw()会进行再次转义。

String.raw`Hi\\n`
// 返回 "Hi\\\\n"

String.raw`Hi\\n` === "Hi\\\\n" // true

String.fromCharCode()

• 作用：由指定的 UTF-16 代码单元序列创建的字符串。
• 语法：String.fromCharCode()：
  • 参数是一系列 UTF-16 代码单元的数字
  • 范围介于 0 到 65535（0xFFFF）之间
  • 大于 0xFFFF 的数字将被截断。
• 参数：
• 返回值：一个长度为 N 的字符串，由 N 个指定的 UTF-16 代码单元组成

String.fromCharCode(65, 66, 67);   // 返回 "ABC"
String.fromCharCode(0x2014);       // 返回 "—"
String.fromCharCode(0x12014);      // 也是返回 "—"; 数字 1 被剔除并忽略
String.fromCharCode(8212);         // 也是返回 "—"; 8212 是 0x2014 的十进制表示

String.fromCodePoint()【ES6】

• 作用：使用指定的代码点序列创建的字符串
• 语法：String.fromCodePoint()：
• 参数：一串 Unicode 编码位置，即“代码点”。
• 返回值：使用指定的 Unicode 编码位置创建的字符串。

console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));	//  "☃★♲你"
console.log(String.fromCodePoint(97, 98, 100, 101));	//  "abde"