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 = '<div><span>' + key + '</span><span>' + val + '</span></div>'

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

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

let str1 = `<div><span>${key}</span><span>${val}</span></div>`

${} 里面也可以做运算

let str1 = `<div><span>${key}</span><span>${val == 0 ? '男' : '女'}</span></div>`

查询

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 = `http://blog.haiweilian.com`
str.indexOf(':') // 4
str.indexOf(':',5) // -1

lastIndexOf()

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

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

includes()

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

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

startsWith(), endsWith()

startsWith()

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

let str = `http://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 = `http://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 = `http://blog.haiweilian.com`
str.substr(0) // "http://blog.haiweilian.com"
str.substr(0,7) // "http://"
str.substr(7,4) // "blog"

substring()

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

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

slice()

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

let str = `http://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"