JavaScript字符串操作全解：ES6新增方法与经典API汇总
本文系统梳理了JavaScript中字符串的47种操作方法，涵盖增删改查四大类。重点解析ES6引入的padStart、padEnd、trimStart、trimEnd、at、replaceAll及模板字符串等新特性，同时回顾concat、slice、substring、indexOf等经典API，帮助开发者全面掌握字符串处理技巧。
本文将为您详细介绍JavaScript中字符串的各种操作方法，无论是常用还是较少使用的功能，这里都进行了整理。
部分分类可能不够严谨，敬请谅解。
增加操作
1. concat()
用于拼接字符串，可以将两个或多个字符串连接在一起。
let str = "hello"
let str1 =" str"
console.log("hello".concat(str1)) //hello str
console.log(str.concat(str1)) //hello str
2. padStart(总长度, 填充字符串)
该方法返回一个新字符串，使用指定字符串从原字符串头部（左侧）进行补全，直到达到指定的总长度。
let str = "hello str"
// 现在我们str的长度为9
// 我们限定了总长度为10 我们在字符串最前面添加 一直添加到总长度为10
// 如果未填充字符串 字符串不变
console.log(str.padStart(10,"123")) //1hello str
3. padEnd(总长度, 填充字符串)
该方法返回一个新字符串，使用指定字符串从原字符串尾部（右侧）进行补全，直到达到指定的总长度。
let str = "hello str"
// 现在我们str的长度为9
// 我们限定了总长度为10 我们在字符串最后面添加 一直添加到总长度为10
// 如果未填充字符串 字符串不变
console.log(str.padEnd(10, "123")) //hello str1
—————————————————————————————————————
删除操作
4. slice()
用于从字符串中截取指定部分，不会修改原字符串。第一个参数指定开始位置的索引（包含该位置）。
第二个参数指定结束位置的索引（不包含该位置）。
let str = "hello str"
// 一个参数截取后面所有的字符串
console.log(str.slice(6)) //str
console.log(str.slice(0,5)) //hello
// 也可以传递一个负数，负数将会从后面计算
console.log(str.slice(0,-1)) //hello st
5. substr()
用于截取字符串。第一个参数指定开始位置的索引，第二个参数指定截取的字符长度。
let str = "hello str"
console.log(str.substr(0,5))//hello
console.log(str.substr(6,3))//str
6. substring()
用于字符串截取，语法为 substring(开始索引[, 结束索引])。
let str = "hello str"
// 当只有一个参数的时候 索引位置往后全部截取 包含索引位置
console.log(str.substring(6)) //"str"
// 当有两个参数的时候 开始索引的位置 结束索引的位置
// 结束的索引不包含想要截取的部分
// 记住包前不包后
console.log(str.substring(6,7)) //"s"
7. trim()
用于清除字符串首尾的空格。
let str = " hello str "
console.log(str.trim()) //"hello str"
8. trimEnd()
trimEnd() 方法用于从一个字符串的末端移除空白字符。
let str = "hello str "
console.log(str.length) //13
console.log(str.trimEnd().length) // 9
console.log(str.trimEnd()) // hello str
9. trimRight()
trimRight() 方法用于从一个字符串的末端移除空白字符。
let str = "hello str "
console.log(str.length) //13
console.log(str.trimRight().length) // 9
console.log(str.trimRight()) // hello str
10. trimLeft()
trimLeft() 方法用于从一个字符串的前端移除空白字符。
let str = " hello str"
console.log(str.length) //13
console.log(str.trimLeft().length) // 9
console.log(str.trimLeft()) // hello str
11. trimStart()
trimStart() 方法用于从一个字符串的前端移除空白字符。
let str = " hello str"
console.log(str.length) //13
console.log(str.trimStart().length) // 9
console.log(str.trimStart()) // hello str
——————————————————————————————————————————————————
修改操作
12. split()
将字符串切割为数组，切割后的结果可以使用数组相关方法进行操作。
let str = "red,orange"
console.log(str.split(",")) // ['red', 'orange']
console.log(str.split("")) //['r', 'e', 'd', ',', 'o', 'r', 'a', 'n', 'g', 'e']
12. toLocaleLowerCase()
将字符串中的大写字母转换为小写。
let str = "HELLO STR"
console.log(str.toLocaleLowerCase()) //hello str
13. toLocaleUpperCase()
将字符串中的小写字母转换为大写。
let str = "hello str"
console.log(str.toLocaleUpperCase()) //HELLO STR
14. toLowerCase()
将字符串中的大写字母转换为小写。
let str = "HELLO STR"
console.log(str.toLowerCase()) //hello str
16. toUpperCase()
将字符串中的小写字母转换为大写。
let str = "hello str"
console.log(str.toUpperCase()) //HELLO STR
17. toString()
toString() 有多种用法，此处主要介绍与字符串相关的功能。
可以将其他数据类型转换为字符串类型。
let arr = [1]
let obj = {name:"zs"}
let num = 1
console.log(arr.toString()) // 1
console.log(typeof arr.toString()) // string
console.log(obj.toString()) // [object Object]
console.log(typeof obj.toString()) // string
console.log(num.toString()) // 1
console.log(typeof obj.toString()) // string
18. replace()
用于将字符串中指定的内容替换为新内容。第一个参数为被替换的内容，第二个参数为新内容。
let str = "hello str"
console.log(str.replace("hello","hh")) //hh str
19. replaceAll()
replaceAll() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，该函数会替换所有匹配到的子字符串。
let str = "hello str hello str"
console.log(str.replaceAll("hello","hh")) //hh str hh str
20. repeat(number)
返回一个新字符串，表示将原字符串重复指定次数。
let str = "hello str"
console.log(str.repeat(2)) //hello strhello str
——————————————————————————————————————————————————
查找操作
21. length
用于获取字符串的长度。
let str = "hello str"
console.log(str.length) //9
22. charAt()
str.charAt(index)，其中 index 是字符在字符串中的位置索引，索引从 0 开始。
如果提供的索引超出范围，则返回空字符串。
let str = "hello str"
console.log(str.charAt(0)) //h
console.log(str.charAt(9)) //空
23. indexOf()
用于检索字符串中是否包含指定内容。如果包含，则返回其第一次出现的索引；可选的第二个参数代表开始查找的位置。如果未找到指定内容，则返回 -1。
let str = "hello hello"
console.log(str.indexOf("h")) //0
console.log(str.indexOf("v")) //-1
//有两个参数的时候 索引指定开始查找位置
console.log(str.indexOf("e",0)) //1
console.log(str.indexOf("h",1)) //-1
24. lastIndexOf()
用于从后往前检索字符串中是否包含指定内容。如果包含，则返回其最后一次出现的索引；可选的第二个参数代表开始查找的位置。如果未找到指定内容，则返回 -1。
let str = "hello hello"
console.log(str.lastIndexOf("h")) //6
console.log(str.lastIndexOf("v")) //-1
// 从下标为0的位置开始从后往前找
console.log(str.lastIndexOf("h",0)) //0
console.log(str.lastIndexOf("h",6)) //6
25. includes()
用于判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。
let str = "hello str"
console.log(str.includes("hello")) //true
console.log(str.includes("str")) //true
console.log(str.includes("helo")) //false
//两个值时 第二个值是索引 如下例 从索引1后面再开始查找
console.log(str.includes("hello",1)) //false
console.log(str.includes("ello",1)) //true
26. charCodeAt()
返回指定索引位置字符的 Unicode 值。
let str = "hello str"
console.log(str.charCodeAt(0)) //104
27. formCharCode()
可以根据字符编码获取对应的字符，需要通过 String.fromCharCode() 来调用。
console.log(String.fromCharCode(20000)) // 北
28. search()
用于搜索字符串中是否含有指定内容。如果搜索到，则返回第一次出现的索引；如果未搜索到，则返回 -1。该方法也可以接收一个正则表达式作为参数，并根据正则表达式检索字符串。
let str = "hello str"
console.log(str.search("hello")) //0
console.log(str.search("str")) //6
console.log(str.search("v")) //-1
// 可以使用正则表达式
let str1 = "aac abc acc"
console.log(str1.search(/a[abc]c/)) //0
29. match()
可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。默认情况下只会找到第一个符合要求的內容，找到后停止检索。可以设置正则表达式为全局匹配，此时将返回一个数组。
let str = "1a2b3c"
console.log(str.match(/[A-z]/))
console.log(str.match(/[A-z]/g))
30. at()
at() 方法用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
匹配给定索引的数组中的元素。如果找不到指定的索引，则返回 undefined。
let str = "hello str"
console.log(str.at(9)) // undefined
console.log(str.at(0)) // h
console.log(str.at(-1)) // r
31. startsWith()
返回布尔值，用于判断参数字符串是否在原字符串的头部。
let str = "hello str"
// h在字符串的头部返回true
console.log(str.startsWith("h"))//true
// e不在头部返回false
console.log(str.startsWith("e"))//false
32. endsWith()
返回布尔值，用于判断参数字符串是否在原字符串的尾部。
let str = "hello str"
// r在字符串的尾部返回true
console.log(str.endsWith("r")) // true
// h不在字符串的尾部返回false
console.log(str.endsWith("h")) // false
33. localeCompare()
用于比较两个字符串。
如果第一个字符串大于第二个字符串，返回 1。
如果第一个字符串等于第二个字符串，返回 0。
如果第一个字符串小于第二个字符串，返回 -1。
console.log("a".localeCompare("b")) // -1
console.log("a".localeCompare("a")) // 0
console.log("b".localeCompare("a")) // 1
——————————————————————————————————————————————————
标签类型方法
34. sub()
该方法返回加了 sub 标签的字符串。
let str = "hello str"
console.log(str.sub())
35. big()
该方法返回加了 big 标签的字符串。
let str = "hello str"
console.log(str.big())
36. bold()
该方法返回加了 b 标签的字符串。
let str = "hello str"
console.log(str.big())
37. anchor()
anchor() 方法用于创建 HTML 锚，该方法返回加了 a 标签的字符串。
let str = "hello str"
console.log(str.anchor("url地址"))
38. blink()
blink() 方法用于显示闪动的字符串。
该方法返回加了 blink 标签的字符串。
let str = "hello str"
console.log(str.blink())
39. fixed()
fixed() 方法用于把字符串显示为打字机字体。
该方法返回加了 tt 标签的字符串。
let str = "hello str"
console.log(str.fixed())
40. small()
该方法返回加了 small 标签的字符串。
let str = "hello str"
console.log(str.small())
41. link()
该方法返回加了 a 标签的字符串。
let str = "hello str"
console.log(str.link("url地址"))
42. strike()
该方法返回加了 strike 标签的字符串。
let str = "hello str"
console.log(str.strike())
43. fontcolor()
fontcolor() 方法用于按照指定的颜色来显示字符串。
该方法返回加了 font 标签的字符串。
let str = "hello str"
console.log(str.fontcolor("red"))
44. fontsize()
fontsize() 方法用于按照指定的尺寸来显示字符串。
该方法返回加了 font 标签的字符串。
let str = "hello str"
console.log(str.fontsize(12))
45. italics()
italics() 方法用于把字符串显示为斜体。
该方法返回加了 i 标签的字符串。
let str = "hello str"
console.log(str.fontsize(12))
——————————————————————————————————————————————————
46. valueOf()
返回 String 对象的原始值。
let str = "hello str"
console.log(str.valueOf()) //hello str
47. 模板字符串
ES6新增了模板字符串，让我们拼接字符串时更方便。注意：切记使用反引号作为字符串的定界符，分隔的字面量。
1. 拼接
在模板字符串出现之前，拼接字符串是比较麻烦的。
const name = "杰克";
const age = 18;
// 以前的拼接字符串
console.log("大家好,我的名字叫"+name+",我今年"+age+"岁")
现在有了模板字符串，拼接起来就会简单许多。
模板字符串使用反引号 `` 作为字符串的定界符，分隔的字面量。
const name = "杰克";
const age = 18;
// 模板字符串,切记使用反引号
console.log(`大家好,我的名字叫${name},我今年${age}岁`)
2. 换行
以前我们用双引号或者单引号编写字符串时，如果出现一行装不下的情况下，我们需要使用 + 号来拼接。
const name = "杰克";
const age = 18;
// 一行装不下我们需要用+来拼接
console.log("大家好，我的名字叫杰克"
+"今年18岁了")
现在我们有了模板字符串，就可以更简单的实现换行。
const name = "杰克";
const age = 18;
// 一行装不下我们需要用+来拼接
console.log(`大家好，我的名字叫杰克
今年18岁了`)总结
到此这篇关于JS+ES6新增字符串操作方法汇总的文章就介绍到这了，更多相关JS+ES6新增字符串内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组？
2026-11-05 09:59:18