Js中的字符串String的常用方法和注意点

关于string的常用方法和注意点

基础

用 ” || “” || “ 包起来的都是字符串

let str1 =  'abc'
let str2 =  "abc"
let str3 =  `abc`

实例创建

let str4 = new string('abc') //返回string的实例

字符串的长度length

`abc`.length  //3

模板字符串

还记得以前绑定数据拼接html字符串的痛苦吗？(不包含框架) 先来个短的

let key = '性别'
let val = '0'
let str = '

' + key + '' + val + '

'

模板字符串是增强版的字符串 用反引号 “ 包裹

内部可以使用${}拼接变量

let str1 = `

${key}${val}

`

${} 里面也可以做运算

let str1 = `

${key}${val == 0 ? '男' : '女'}

`

查询

charat(), at()

- 作用: 通过索引获取指定位置的字符
- 参数: charat(index = 0) index查询的索引
- 返回值: 通过索引查询的字符

let str = `abcdefg`
str.charat(2) // 'c'

但charat()不能识别码点大于0xffff的字符, 现在有一个提案方案at() 需要垫片 目前 babel并未实现
如: 中文 ‘??’

'??'.charat(0) // "?"  chorme 版本 66.0.3359.139（正式版本） （64 位）
'??'.at(0) // "??"

indexof(), lastindexof()

indexof()

- 作用: 查询 指定字符串 在 其他字符串 中第一次出现的位置 从左往右查询
- 参数: indexof(searchstring[, index = 0]) searchstring查询的字符串 index为可选参数 表示开始的查询的索引
- 返回值: 如果当前字符串包含被查询的字符串, 则返回在字符串中的索引, 反之返回 -1

let str = `https://blog.haiweilian.com`
str.indexof(':') // 4
str.indexof(':',5) // -1

lastindexof()

- 作用: 查询 指定字符串 在 其他字符串 中最后一次出现的位置 从右往左查询
- 参数: lastindexof(searchstring[, index = str.length - 1]) searchstring查询的字符串 index为可选参数 表示开始的查询的索引
- 返回值: 如果当前字符串包含被查询的字符串, 则返回在字符串中的索引, 反之返回 -1

let str = `https://blog.haiweilian.com`
str.lastindexof(':') // 4
str.lastindexof(':',3) // -1

includes()

- 作用: 判断一个字符串中是否包含指定字符串
- 参数: includes(searchstring[, index = 0]) searchstring查询的字符串 index为可选参数 表示开始的查询的索引
- 返回值: 如果当前字符串包含指定字符串，则true, 反之 false

let str = `https://blog.haiweilian.com`
str.includes('//') // true
str.includes('//', 6) // false

startswith(), endswith()

startswith()

- 作用: 判断指定字符串是否在一个字符串的头部
- 参数: startswith(ifstring [, index = 0]) ifstring要判断的字符串 如果指定index那么index就是字符串的头部
- 返回值: 如果是在开头，则true, 反之 false

let str = `https://blog.haiweilian.com`
str.startswith('http') // true
str.startswith('ttp') // false
str.startswith('ttp',1) // true

endswith()

- 作用: 判断指定字符串是否在一个字符串的尾部
- 参数: endswith(ifstring [, count = str.length]) ifstring要判断的字符串 如果指定count那么就是针对字符串前count个字符
- 返回值: 如果是在尾部，则true, 反之 false

let str = `https://blog.haiweilian.com`
str.endswith('com') // true
str.endswith('lian') // false
str.endswith('lian',str.length - 4) // true

截取

substr()

- 作用: 从索引start开始截取count个字符
- 参数: substr(start = 0 [, count = str.length - start]) start开始截取的索引 count要截取的个数
- 返回值: 截取到的字符串

let str = `https://blog.haiweilian.com`
str.substr(0) // "https://blog.haiweilian.com"
str.substr(0,7) // "https://"
str.substr(7,4) // "blog"

substring()

- 作用: 从索引start开始截取到索引为end处 (不包含end)
- 参数: substring(start = 0 [, end = str.length]) start 开始截取的索引 end 截取结束的索引
- 返回值: 截取到的字符串

let str = `https://blog.haiweilian.com`
str.substring()
str.substring(0,7) //"https://"

slice()

slice()的用法和 substring() 一样, 但slice() 支持负数作为参数

let str = `https://blog.haiweilian.com`
str.slice(-4,-3) // "."

转换

split()

- 作用: 把一个字符串按照指定的分隔符拆分成数组(与数组的join()对应)
- 参数: split(str = ',') str指定以什么符号拆分
- 返回值: 拆分后的数组

let str = 'a,b,c,d,e'
str.split() //["a,b,c,d,e"]
str.split('c') //["a,b,", ",d,e"]

tolowercase()/touppercase() , tolocalelowercase()/tolocaleuppercase()

tolowercase() , tolocalelowercase() 把一个字符串转换为小写 返回转换后的字符串

let str = 'hello word'
str.tolowercase() // "hello word"
str.tolocalelowercase() // "hello word"

touppercase() , tolocaleuppercase() 把一个字符串转换为大写 返回转换后的字符串

let str = 'hello word'
str.tolowercase() // "hello word"
str.tolocalelowercase() // "hello word"

我们看着tolowercase() 对比 tolocalelowercase() 和 touppercase() 对比 tolocalelowercase() 返回的并无区别, 但tolocalelowercase()和tolocalelowercase()是根据地区转的(没有遇见过问题), 为了保险最好还是用后者

增 删 改

padstart(), padend()

- 作用: 补全字符串的长度。如果某个字符串不够指定长度，会在头部(padstart())或尾部(padend())补全
- 参数: padstart(minlength, str) padend(minlength, str) minlength指定字符串最小长度 str 用在补全的字符串
- 返回值: 补全后的字符串

'13'.padstart(10, 'yyyy-mm-dd') // "yyyy-mm-13"
'05-13'.padstart(10, 'yyyy-mm-dd') // "yyyy-05-13"
'aaa'.padend(4,'b') // "aaab"

trim()

- 作用: 去掉字符串的首尾空格
- 返回值: 去掉空格后的字符串

'  hello word  '.trim() //"hello word"

trim()只能去掉空格 所以我写了一个去除字符串指定的首尾字符

replace()

- 作用: 用指定的值去替换符合匹配规则的值
- 参数: replace(regexp|substr, newsubstr|function) regexp|substr被替换的值是 一个匹配正则或者一个字符串 newsubstr|function 用于替换的值是 一个字符串或者一个回调。 下面依次举例
- 返回值: 替换后的字符串

如果被替换的值是一个字符串, 那么它每次只能替换一次

'2018-05-13'.replace('-','/') // "2018/05-13"
'2018-05-13'.replace('-','/').replace('-','/') // "2018/05/13"

如果被替换的值是一个正则, 可以利用全局捕获g修饰符进行全局替换

'2018-05-13'.replace(/-/g,'/') // "2018/05/13"

如果第二参数是一个函数, 如果第一个参数是一个正则并且设置了修饰符g 那么这个函数将会多次调用

'2018-05-13'.replace(/(\d+)(-)/g, (match,p1,p2,offset,string) => {
    console.log(match,p1,p2,offset,string)
    //依次输出:
        //2018- 2018 - 0 2018-05-13
        //05-   05   - 5 2018-05-13
    //参数注释:
        // match  正则匹配到的字符串
        // p1,p2  p...有多少取决于正则里面有多少括号
        // offset 匹配到的字符串在原字符串的索引位置
        // string 原字符串
    return match
}) // "2018-05-13"