文章前言

永远把别人对你的批评记在心里，别人的表扬，就把它忘了。Hello 大家好～！我是南宫墨言QAQ

观看到文章最后的话，如果觉得不错，可以点个关注或者点个赞哦！感谢～❤️

文章主体

感谢各位观者的耐心观看，字符串使用手册正片即将开始，且听南宫墨言QAQ娓娓道来

字符串对象原生方法

concat、slice、substring、trim、trimLeft、trimRight、repeat、padStart、padEnd、toLowerCase、toUpperCase、charAt、indexOf、startsWith、endsWith、includes、split、match、search、replace

操作方法

字符串基本操作可以归纳为增、删、改、查，需要知道字符串的特点是一旦创建了，就不可变

增

这里增的意思并不是说直接增添内容，而是创建字符串的一个副本，再进行操作

除了常用的+以及${}进行字符串拼接之外，还可通过concat

concat

用于将一个或多个字符串拼接成一个新字符串

/**
 * string.concat(...strings: string[])
 * @param strings 要附加到字符串末尾的字符串.
 * @returns 新的字符串.
 **/
 const string = 'hello' // 原字符串
 const rltString = string.concat('world') // 拼接一个字符串

 console.log(string) // hello
 console.log(rltString) //helloworld

删

这里删的意思并不是说删除原字符串的内通，而是创建字符串的一个副本，再进行操作

常见的方法有：slice、substring；这些方法都返回调用他们的字符串的一个子字符串，而且都接收一或两个参数

slice

/**
 * string.slice(start?: number, end?: number)
 * @param strat（可选）开始索引.
 * @param end（可选）结束
 * @returns 新的字符串.
 **/
 const string = 'hello' // 原字符串
 const sliceRlt1 = string.slice(2) // 从索引2开始截取
 const sliceRlt2 = string.slice(2,4) // 从索引2到5截取

 console.log(string) // hello
 console.log(sliceRlt1) // llo
 console.log(sliceRlt2) // ll

substring

/**
 * string.substring(start?: number, end?: number)
 * @param strat（可选）开始索引.
 * @param end（可选）结束
 * @returns 新的字符串.
 **/
 const string = 'hello' // 原字符串
 const substringRlt1 = string.substring(2) // 从索引2开始截取
 const substringRlt2 = string.substring(2,4) // 从索引2到5截取

 console.log(string) // hello
 console.log(substringRlt1) // llo
 console.log(substringRlt2) // ll

改

这里的改的意思也不是改变原字符串，而是创建字符串的一个副本，再进行操作

常见的方法有：trim、trimLeft、trimRight、repeat、padStart、padEnd、toLowerCase、toUpperCase

trim、trimLeft、trimRight

const string = ' hello  ' // 原字符串
/**
 * string.trim()
 * @returns 删除前后空字符的字符串
 **/
const trimRlt = string.trim()
/**
 * string.trim()
 * @returns 删除前面空字符的字符串
 **/
const trimStartRlt = string.trimStart()
/**
 * string.trim()
 * @returns 删除后面空字符的字符串
 **/
const trimEndRlt = string.trimEnd()

console.log(string) //  hello  
console.log(trimRlt) // hello
console.log(trimStartRlt) // hello
console.log('trimStartRltLength', trimStartRlt.length) // 7
console.log(trimEndRlt) //  hello
console.log('trimEndRltLength', trimEndRlt.length) //6

repeat

接收一个整数参数，表示要将字符串复制多少次，然后返回拼接所有副本后的结果

/**
 * string.repeat(count: number)
 * @param count 复制的次数.
 * @returns 新的字符串.
 **/
const string = 'hello' //原字符串
const repeatRlt = string.repeat(3) // 重复3次
console.log(string) // hello
console.log(repeatRlt) // hellohellohello

padStart、padEnd

用另一个字符串填充当前字符串（如果需要，可以多次填充），直到结果字符串达到给定长度

const string = 'hello'
/**
 * string.padStart(maxLength: number, fillString?: string)
 * @param maxLength（可选） 最大长度.
 * @param fillString（可选） 填充的字符串.
 * @returns 新的字符串.
 **/
const padStartRlt1 = string.padStart(6)
const padStartRlt2 = string.padStart(10,'.')
/**
 * string.padEnd(maxLength: number, fillString?: string)
 * @param maxLength（可选） 最大长度.
 * @param fillString（可选） 填充的字符串.
 * @returns 新的字符串.
 **/
const padEndRlt1 = string.padEnd(6)
const padEndRlt2 = string.padStart(10,'.')


console.log(string) // hello
console.log(padStartRlt1) //  hello
console.log(padStartRlt2) // .....hello
console.log(padEndRlt1) // hello 
console.log(padEndRlt2) // hello.....

toLowerCase、toUpperCase

将字符串进行大小写转换

const string = 'hello'
/**
 * string.toUpperCase()
 * @returns 转换大写后的字符串
 **/
const toUpperCaseRlt = string.toUpperCase()
/**
 * string.toLocaleLowerCase()
 * @returns 转换小写后的字符串
 **/
const toLocaleLowerCaseRlt = string.toLocaleLowerCase()

console.log(string) // hello
console.log(toUpperCaseRlt) // HELLO
console.log(toLocaleLowerCaseRlt) // hello

查

除了通过索引的方式获取字符串的值，还可以通过：charAt、indexOf、startsWith、endsWith、includes

charAt

返回给定索引位置的字符，由传给方法的整数参数指定

/**
 * string.charAt(pos: number)
 * @param pos 要查询的索引.
 * @returns 给定索引位置的字符串.
 **/
 const string = 'hello' //原字符串
 const charAtRlt1 = string.charAt(2) // 索引为2的字符

 console.log(string) // hello
 console.log(charAtRlt1) // l

indexOf

从字符串开头去搜索传入的字符串，并返回位置，如果没有找到，则返回-1

/**
* string.indexOf(searchString: string, position?: number)
* @param searchString 要查询的字符串.
* @param position(可选) 从那个索引位置开始.
* @returns 给定索引位置的字符串.
**/
const string = 'hello' //原字符串
const indexOfRlt1 = string.indexOf('l') // 查找字符串l
const indexOfRlt2 = string.indexOf('l', 3) // 从索引为3开始查找字符串l
const indexOfRlt3 = string.indexOf('z') // 查找字符串z


console.log(string) // hello
console.log(indexOfRlt1) // 2
console.log(indexOfRlt2) // 3
console.log(indexOfRlt3) // -1

startsWith、endsWith

检测字符串是否以搜索的字符串开头或结尾，并返回一个布尔值

const string = 'hello'
/**
* string.startsWith(searchString: string, position?: number)
* @param searchString 要查询的字符串.
* @param position(可选) 从那个索引位置开始.
* @returns 给定索引位置的字符串.
**/
const startsWithRlt1 = string.startsWith('he')
const startsWithRlt2 = string.startsWith('hex')
const startsWithRlt3 = string.startsWith('')
/**
* string.endsWith(searchString: string, position?: number)
* @param searchString 要查询的字符串.
* @param position(可选) 从那个索引位置开始.
* @returns 给定索引位置的字符串.
**/
const endsWithRlt1 = string.endsWith('llo')
const endsWithRlt2 = string.endsWith('ll')
const endsWithRlt3 = string.endsWith('')

console.log(string) // hello
console.log(startsWithRlt1) // true
console.log(startsWithRlt2) // false
console.log(startsWithRlt3) // true
console.log(endsWithRlt1) // true
console.log(endsWithRlt2) // false
console.log(endsWithRlt3) // true

includes

检查字符串中是否包含搜索的字符串，并返回一个布尔值

/**
* string.includes(searchString: string, position?: number)
* @param searchString 要查询的字符串.
* @param position(可选) 从那个索引位置开始.
* @returns 给定索引位置的字符串.
**/
const string = 'hello' // 原字符串
const includesRlt1 = string.includes('he') // 是否包含he
const includesRlt2 = string.includes('he', 2) // 从索引为2开始检查是否包含he
const includesRlt3 = string.includes('hex') // 是否包含hex

console.log(string) // hello
console.log(includesRlt1) // true
console.log(includesRlt2) // false
console.log(includesRlt3) // false

操作方法

split

把字符串按照指定的分割符，拆分成数组中的每一项

 /**
* string.split(value: string, limit?: number)
* @param value 指定的分割符.
* @param limit(可选) 限定返回字符的长度，不填为全部返回.
* @returns 分割后的数组.
**/
const string = 'h+e+l+l+o' // 原字符串
const splitRlt1 = string.split('+') // 分割符尾+
const splitRlt2 = string.split('+',3) //分割符尾+，返回数组长度为3

console.log(string) // h+e+l+l+o
console.log(splitRlt1) // [ 'h', 'e', 'l', 'l', 'o' ]
console.log(splitRlt2) // [ 'h', 'e', 'l' ]

模版匹配方法

针对正则表达式，字符串设计了几个方法：match、search、replace

match

接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，返回匹配的数组

/**
* string.match(mathcer: any)
* @param mathcer 正则表达式字符串或RegExp对象.
* @returns 数组.
**/
const string = 'bat, cat, fat, sat'
const pattern1 = /.at/
const pattern2 = /.at/g
const matchRlt1 = string.match(pattern1)
const matchRlt2 = string.match(pattern2)

console.log(string) // bat, cat, fat, sat
console.log(matchRlt1) // [ 'bat', index: 0, input: 'bat, cat, fat, sat', groups: undefined ]
console.log(matchRlt2) // [ 'bat', 'cat', 'fat', 'sat' ]

search

接收一个参数，可以是一个正则表达式字符串，也可以是一个RegExp对象，找到则返回匹配索引，否则返回-1

/**
* string.search(mathcer: any)
* @param mathcer 正则表达式字符串或RegExp对象.
* @returns 匹配的索引.
**/
const string = 'bat, cat, fat, sat'
const searchRlt1 = string.search(/.fa/)

console.log(string) // bat, cat, fat, sat
console.log(searchRlt1) // 9

replace

接收两个参数，第一个参数为匹配的内容，第二个参数为替换的元素（可用函数）

const string = 'bat, cat, fat, sat'
const replaceRlt1 = string.replace(/.at/, 'oss')
const replaceRlt2 = string.replace(/.at/g, 'oss')
const replaceRlt3 = string.replace(/.at/, (match, p1, p2, p3, offset, string)=>{
 console.log({match, p1, p2, p3, offset, string})
 // {
 // match: 'bat',
 // p1: 0,
 // p2: 'bat, cat, fat, sat',
 // p3: undefined,
 // offset: undefined,
 // string: undefined
 // }
})

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is non-digits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(" - ");
}
const newString = "abc12345#$*%".replace(/([^\d]*)(\d*)([^\w]*)/, replacer);

console.log(string) // bat, cat, fat, sat
console.log(replaceRlt1) // oss, cat, fat, sat
console.log(replaceRlt2) // oss, oss, oss, oss
console.log(newString) // abc - 12345 - #$*%

结尾营业

看官都看到这了，如果觉得不错，可不可以不吝啬你的小手手帮忙点个关注或者点个赞