【JavaScript】常用的字符串方法汇总（含ES6字符串方法）

逃离我推掉我的手 2022-12-01 05:09 344阅读 0赞

**常用的数组方法汇总（含ES6数组方法）**：[链接][Link 1]

### 目录 ###

*   *   *  一、 ES5 字符串方法
         *   *  1. length
             *  2. charAt()
             *  3. charCodeAt()、fromCharCode()
             *  4. indexOf()、lastIndexOf()
             *  5. concat()
             *  6. split()
             *  7. substr()、substring()、slice()
             *  8. toLowerCase()、 toUpperCase()
             *  9. replace()、match()、search()
             *  10. trim()
             *  11. valueOf()、toString()
         *  二、ES6 字符串方法
         *   *  1. includes()、startsWith()、 endsWith()
             *  2. repeat()
             *  3. padStart()、padEnd()
             *  4. trimStart()、trimEnd()

### 一、 ES5 字符串方法 ###

先看一下ES5中常见的字符串方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>charAt()</td> 
   <td>返回指定索引位置的字符</td> 
  </tr> 
  <tr> 
   <td>charCodeAt()</td> 
   <td>返回指定索引位置字符的 Unicode 值</td> 
  </tr> 
  <tr> 
   <td>fromCharCode()</td> 
   <td>将 Unicode 转换为字符串</td> 
  </tr> 
  <tr> 
   <td>indexOf()</td> 
   <td>返回字符串中检索指定字符第一次出现的位置</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>返回字符串中检索指定字符最后一次出现的位置</td> 
  </tr> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或多个字符串，返回连接后的字符串</td> 
  </tr> 
  <tr> 
   <td>split()</td> 
   <td>把字符串分割为子字符串数组</td> 
  </tr> 
  <tr> 
   <td>substr()</td> 
   <td>从起始索引号提取字符串中指定数目的字符</td> 
  </tr> 
  <tr> 
   <td>substring()</td> 
   <td>提取字符串中两个指定的索引号之间的字符</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>提取字符串的片断，并在新的字符串中返回被提取的部分</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>把字符串转换为小写</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>把字符串转换为大写</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>替换与正则表达式匹配的子串</td> 
  </tr> 
  <tr> 
   <td>match()</td> 
   <td>找到一个或多个正则表达式的匹配</td> 
  </tr> 
  <tr> 
   <td>search()</td> 
   <td>检索与正则表达式相匹配的值</td> 
  </tr> 
  <tr> 
   <td>trim()</td> 
   <td>移除字符串首尾空白</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回某个字符串对象的原始值</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回字符串对象值</td> 
  </tr> 
 </tbody> 
</table>

#### 1. length ####

获取字符串长度： `str.length`

let str = "abcdefg";
    console.log(str.length);  //7
    console.log(str[str.length-1]);  //"g"

#### 2. charAt() ####

获取字符串某位字符：`str.charAt()`

let str = "abcdefg";
    console.log(str[0]); //"a"
    console.log(str.charAt(1)); //"b"

#### 3. charCodeAt()、fromCharCode() ####

（1）`charCodeAt()`：返回指定索引位置字符的 Unicode 值

let str = "abcdefg";
    console.log(str.charCodeAt(1)); //"b" --> 98

（2） `fromCharCode()`：将 Unicode 转换为字符串

console.log(String.fromCharCode(98)); //98 --> "b"

#### 4. indexOf()、lastIndexOf() ####

（1）`indexOf()`：查找某个字符，有则返回第一次匹配到的位置，否则返回-1

let str = "abcdefg";
    console.log(str.indexOf("a"));  // 0
    console.log(str.indexOf("z"));  // -1

（2）`lastIndexOf()`：查找某个字符，有则返回最后一次匹配到的位置，否则返回-1

let str = "abcabc";
    console.log(str.lastIndexOf("a"));  // 3
    console.log(str.lastIndexOf("z"));  // -1

#### 5. concat() ####

将指定的字符串参数连接到字符串上

let str = "abc";
    console.log(str.concat("efg")); //"abcefg"
    console.log(str.concat("efg","hijk")); //"abcefghijk"

#### 6. split() ####

把一个字符串分割成字符串数组。

**语法：** `str.split(separator,howmany)`

**参数：**

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

let str = "abcdef";
    console.log(str.split("c")); // ["ab", "def"]
    console.log(str.split(""));  // ["a", "b", "c", "d", "e", "f"]

注意：如果把空字符串 ("") 用作 separator，那么 str中的每个字符之间都会被分割。

#### 7. substr()、substring()、slice() ####

这三个方法都是用来截取字符串：

（1） `slice()` ：提取字符串的片断，并在新的字符串中返回被提取的部分

**语法：** slice(start, end)

使用 start（包含） 和 end（不包含） 参数来指定字符串提取的部分。

注意： 如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。

let str = "abcdef";
    console.log(str.slice(1,6)); //"bcdef" [1,6)
    console.log(str.slice(1));   //"bcdefg" 
    console.log(str.slice());    //"abcdefg" 
    console.log(str.slice(-2));  //"fg"
    console.log(str.slice(6, 1));  //""

（2） `substr()` : 从起始索引号提取字符串中指定数目的字符  
**语法：** `stri.substr(start, length)`

**参数：**

*  start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
 *  length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

let str = "abcdef";
    console.log(str.substr(1,6));  //"bcdefg" 6代表切割的length
    console.log(str.substr(1));   //"bcdefg" [1,str.length-1]
    console.log(str.substr());  //"abcdefg" [0,str.length-1]
    console.log(str.substr(-1));  //"g"

（3） `substring()` ：提取字符串中两个指定的索引号之间的字符

**语法：** `str.substring(start,stop)`

**参数：**

*  start ：必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
 *  stop ：可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

**注意：** 如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。并且该方法不接受负的参数，如果参数是个负数，就会返回这个字符串。

let str = "abcdef";
    console.log(str.substring(1,6)); //"bcdef" [1,6)
    console.log(str.substring(1));  //"bcdefg" [1,str.length-1]
    console.log(str.substring()); //"abcdefg" [0,str.length-1]
    console.log(str.substring(6,1)); //"bcdef" [1,6)
    console.log(str.substring(-1)); //"abcdefg"

#### 8. toLowerCase()、 toUpperCase() ####

（1）`toLowerCase()`：把字符串转换为小写

（2）`toUpperCase()`：把字符串转换为大写

let str = "adABDndj";
    console.log(str.toUpperCase()); //"ADABDNDJ"
    console.log(str.toLowerCase()); //"adabdndj"

#### 9. replace()、match()、search() ####

这三个方法都是用来匹配或者替换字符

（1）`replace()` ：在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

**语法：** `str.replace(regexp/substr,replacement)`

**参数：**

*  regexp/substr：必需。规定子字符串或要替换的模式的 RegExp 对象。如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。
 *  replacement：必需。一个字符串值。规定了替换文本或生成替换文本的函数。

let str = "abcdef";
    console.log(str.replace("c", "z")) // abzdef

**注意：** 如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

（2）`match()` ：在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

**语法：** `str.match(searchvalue/regexp)`

**参数:**

*  searchvalue： 必需。规定要检索的字符串值。
 *  regexp： 必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。

**注意：** 该方法返回存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

let str = "abcdef";
    console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

（3）`search()` ：检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。

**语法：** `str.search(regexp)`

**参数：**

*  regexp ：该参数可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。

**注意：** 要执行忽略大小写的检索，请追加标志 i。该方法不执行全局匹配，它将忽略标志 g，也就是只会返回第一次匹配成功的结果。如果没有找到任何匹配的子串，则返回 -1。

**返回值：** 返回 str 中第一个与 regexp 相匹配的子串的起始位置。

let str = "abcdef";
    console.log(str.search(/bcd/)) // 1

#### 10. trim() ####

该方法用于移除字符串首尾空白

let str = " abcdef "
    console.log(str.trim()) // "abcdef"

#### 11. valueOf()、toString() ####

这两个方法都是返回字符串本身的值

（1）`valueOf()`：返回某个字符串对象的原始值

该方法通常由 JavaScript 在后台自动进行调用，而不是显式地处于代码中。

let str = "abcdef"
    console.log(str.valueOf()) // "abcdef"

（2）`toString()`：返回字符串对象本身

let str = "abcdef"
    console.log(str.toString()) // "abcdef"

### 二、ES6 字符串方法 ###

再看一下ES6中常见的字符串方法：

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>includes()</td> 
   <td>返回布尔值，表示是否找到了参数字符串</td> 
  </tr> 
  <tr> 
   <td>startsWith()</td> 
   <td>返回布尔值，表示参数字符串是否在原字符串的头部</td> 
  </tr> 
  <tr> 
   <td>endsWith()</td> 
   <td>返回布尔值，表示参数字符串是否在原字符串的尾部</td> 
  </tr> 
  <tr> 
   <td>repeat()</td> 
   <td>将原字符串重复n次</td> 
  </tr> 
  <tr> 
   <td>padStart()</td> 
   <td>在字符串头部补全长度</td> 
  </tr> 
  <tr> 
   <td>padEnd()</td> 
   <td>在字符串尾部补全长度</td> 
  </tr> 
  <tr> 
   <td>trimStart()</td> 
   <td>消除字符串头部的空格</td> 
  </tr> 
  <tr> 
   <td>trimEnd()</td> 
   <td>消除尾部的空格</td> 
  </tr> 
 </tbody> 
</table>

#### 1. includes()、startsWith()、 endsWith() ####

在ES6之前，只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

*  `includes()`：返回布尔值，表示是否找到了参数字符串。
 *  `startsWith()`：返回布尔值，表示参数字符串是否在原字符串的头部。
 *  `endsWith()`：返回布尔值，表示参数字符串是否在原字符串的尾部。

let str = 'Hello world!';
    
    str.startsWith('Hello') // true
    str.endsWith('!') // true
    str.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';
    
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，`endsWith`的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

#### 2. repeat() ####

该方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"
    'na'.repeat(0) // ""

参数如果是小数，会被取整。

'na'.repeat(2.9) // "nana"

如果repeat的参数是负数或者Infinity，会报错。

'na'.repeat(Infinity)   // RangeError
    'na'.repeat(-1)         // RangeError

但是，如果参数是 0 到-1 之间的小数，则等同于 0，这是因为会先进行取整运算。0 到-1 之间的小数，取整以后等于-0，repeat视同为 0。

'na'.repeat(-0.9) // ""

参数NaN等同于 0。

'na'.repeat(NaN) // ""

如果repeat的参数是字符串，则会先转换成数字。

'na'.repeat('na') // ""
    'na'.repeat('3') // "nanana"

#### 3. padStart()、padEnd() ####

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全，`padEnd()`用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax'
    
    'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，`padStart()`和`padEnd()`一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

如果原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。

'xxx'.padStart(2, 'ab') // 'xxx'
    'xxx'.padEnd(2, 'ab') // 'xxx'

如果用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。

'abc'.padStart(10, '0123456789')
    // '0123456abc'

如果省略第二个参数，默认使用空格补全长度。

'x'.padStart(4) // ' x'
    'x'.padEnd(4) // 'x '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

'1'.padStart(10, '0') // "0000000001"
    '12'.padStart(10, '0') // "0000000012"
    '123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

#### 4. trimStart()、trimEnd() ####

ES2019 对字符串实例新增了`trimStart()`和`trimEnd()`这两个方法。它们的行为与`trim()`一致，`trimStart()`消除字符串头部的空格，`trimEnd()`消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = ' abc ';
    
    s.trim()   // "abc"
    s.trimStart()   // "abc "
    s.trimEnd()   // " abc"

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法，`trimLeft()`是`trimStart()`的别名，`trimRight()`是`trimEnd()`的别名。

[Link 1]: https://cuggz.blog.csdn.net/article/details/108227139

【JavaScript】常用的字符串方法汇总（含ES6字符串方法）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 20个常用的JavaScript字符串方法

相关 es6新增字符串方法

相关 20个常用的JavaScript字符串方法

相关 JavaScript-中String字符串常用的方法汇总

相关 [JavaScript]字符串方法汇总

相关【JavaScript】常用的字符串方法汇总（含ES6字符串方法）

相关【JavaScript】常用的数组方法汇总（含ES6数组方法）

相关 ES6字符串方法

相关 javascript字符串方法函数汇总

相关 ES6--字符串（拓展的方法、模板字符串）