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

字符串常用方法charAt()charAt()：返回指定索引位置的字符，由传入方法的整数参数指定。let str = "hello world";console.log(str.charAt(7));//oconsole.log(str.charAt(70));//""charCodeAt()chatCodeAt()：返回指定索引位置的unicode编码，由传入方法的整数参数指定。let str

一颗不甘坠落的流星

2933人浏览 · 2021-04-10 17:06:54

一颗不甘坠落的流星 · 2021-04-10 17:06:54 发布

文章目录

序言

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】

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

var str = 'hello world';

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

var res2 = str.endsWith('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"

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开放原子开发者工作坊

所有评论(0)

查看更多评论

一颗不甘坠落的流星

@qq_45677671

已为社区贡献4条内容

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

一颗不甘坠落的流星

文章目录

序言

一、操作方法

1.1、去除空格 trim()

1.2、拼接字符串 concat()

1.3、 替换字符串 replace()

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

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

二、截取方法

2.1、按个数 substr()

2.2、仅正索引 substring()

2.3、正负索引 slice()

三、转换方法

3.1、转数组 split()

3.2、转小写 toLowerCase()

3.3、转大写 toUpperCase()

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

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

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

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

五、查找方法

5.1、正负索引 at()

5.2、仅正索引 charAt()

5.3、字符片段 indexOf()

5.4、字符编码 charCodeAt()

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

六、正则匹配

6.1、返回索引 search()

6.2、返回结果 match()

静态方法

String.raw()

String.fromCharCode()

String.fromCodePoint()【ES6】

所有评论(0)

一颗不甘坠落的流星

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

1.3、替换字符串 replace()

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