JavaScript字符串方法全知道

JavaScript中数据类型分为两种：原始数据类型和引用数据类型。原始数据类型一旦创建，就无法进行改变。

字符串作为原始数据类型是无法进行更改的。如果想要改变，必须要新建字符串。可以使用replace、concat、slice、substring等方法。

replace 和 replaceAll 方法

const str = 'aabbcc'
const newStr = str.replace('a', '')   // 'abbcc'
consr newStr2 = str.replaceAll('a', '')  // 'bbcc'

slice 方法

进行切割，也返回新字符串.

const newStr = str.slice(1,2)  // 'a'

trim 方法

删除字符串前后两边空格

• 应用：当输入文本以英文逗号或者换行隔开，要求输出文本是以逗号相连，如：

computed: {
    resData () {
        return this.inputData.split(/[\n,]/).filter(item => item.trim() !== '').join(',')
    }
}

为了防止空字符串，可以用trim进行去空

转成数组

// 使用split方法

const arr = str.split('')

// 使用Array.from方法

const arr = Array.from(str)

// 使用展开运算符

const arr = [...str]

转成字符串

// 数组可使用join方法

const str = arr.join('')

// 使用toString方法（每个包装类型都有toString方法，因此tmp可为number、boolean

const str = tmp.toString()

trim方法

// 去除空白字符串

const str = '  HELLO   '
const newStr = str.trim()
console.log(newStr)

手动实现trim方法：

const String.prototype._trim = function() {
    
}

超出长度的字符串进行省略，hover显示原字符串

• 采用.length判断字符串长度；采用.substring进行字符串截取

<el-popover
    v-if="demo.length >= 27"
    popper-class="chatbot-popover-popper"
    placement="top-start"
    width="200"
    trigger="hover"
    :content="demo">
    <div slot="reference">{{ demo.substring(0,27) }}... </div>
</el-popover>

对js数组进行逆序

由于js字符串不能改变，并不好使用双指针。双指针更适用于判断回文串。

• 方法1: 转成数组，使用数组的逆序方法

console.log(str.split('').reverse().join(''))

• 方法2：创建新字符串，进行倒序遍历

const reverseStr = (str) => {
    res = ''
    for(let i = str.length - 1; i >= 0; i--) {
        res += str[i]
    }
    return res
}

正则表达式

在线练习网站

[]表示匹配[]枚举的的任意一个

const str = '0123456789' 
const keyword = /3-7/g 
str.match(keyword)

// ['3', '4', '5', '6', '7']

*表示匹配0或多个，+表示1或者多个，?表示0或1，{n}表示n次, {n1,n2}表示至少n1次，至多n2次

const str = 'brberbeer'
const keyword = /be*r/g
console.log(str.match(keyword))
//  ['br', 'ber', 'beer']

const str = 'brberbeer'
const keyword = /be+r/g
console.log(str.match(keyword))
// ['ber', 'beer']

const str = 'brberbeer'
const keyword = /be?r/g
console.log(str.match(keyword))
// ['br', 'ber']

const str = 'brberbeer'
const keyword = /be{2}r/g
console.log(str.match(keyword))
// ['beer']

const str = 'brberbeer'
const keyword = /be{2}r/g
console.log(str.match(keyword))
// ['beer']

const str = 'brberbeer'
const keyword = /be{1,2}r/g
console.log(str.match(keyword))
// ['ber', 'beer']

匹配日期

const str = `Release 10/9/2021`
const keyword = /[0-9]{4}/g
console.log(str.match(keyword))
// ['2021']

const str = `Release 10/9/2021`
const keyword = /[0-9]{4}/g
console.log(str.match(keyword))
// ['2021']

()分组

const str = 'happy-happy-cat'
const keyword = /(happy)/g
console.log(str.match(keyword))

^行首

const str = '1-1'
const keyword = /^[0-9]/g
console.log(str.match(keyword))
// ['1']

匹配邮箱

const str = `example@mail.com`
const keyword = /[0-9a-zA-Z]{1,}@[a-zA-Z]{1,}.com/
console.log(keyword.test(str))