字符串常用方法

字符串：

索引

1、存在索引，从0开始 ：

第一个字符索引 0 ，第二个字符索引 1 ··· ···

2、指定索引不存在，结果 undefined 

let str = 'a'
str[1000] -> undefined

length

1、获取字符串长度

let len = 'lxc'.length // 3
// 获取最后一个字符
let last = 'lxc,hello'
last[last.length - 1] // 'o'

常用方法：

1、str.charAt（index）

返回指定索引位置的字符，和 str[index] 获取索引一样，当前索引不存在，返回空字符串

'lxc'.charAt() // l
'lxc'.charAt(2) // c

2、str.charCodeAt ( index )

在charAt基础上，获取字符的ascll码（把获取的字符变为unicode编码值），（对应ascll码表：）

48到57 -> 0到9

65到90 -> A到Z

97到122 -> a到z

3、String.fromCharCode(unicode值)

把值按照ASCLL码表中的信息，转换为原有的字符，和charCodeAth正好对应

String.fromCharCode(65) // A

小案例：

1。 colorUI库中的索引组件，用到了此方法，输出大写A到Z 26个字母：

let list = [{}];
for (let i = 0; i < 26; i++) {
    list[i] = {};
    list[i].name = String.fromCharCode(65 + i) // 65到90正好是大写 A到Z
}

2。

************ 常用三种截取**************

4、str.substr(n, m) 

从索引n开始截取m个字符

（1）只写一个参数表示从n开始，截取到最后。

5、substring(n，m)

从索引n开始，截取到索引m处（不包含m）  

（1）只写一个参数表示从n开始，截取到最后。

补充：

举例：

在vue2.0 + 源码中，模板解析使用substring来删除正则已匹配到的字符。

template - 是字符串模板，每次将正则匹配到的字符删除，再赋值给模板，方便下次匹配模板下一个字符；

参数n - 是正则匹配到的字符的长度。

从匹配到的字符长度开始截取，截取到最后。

// ...
function advance(n) {
   template = template.substring(n)
}
// ...

6、str.slice(n, m)

和substring语法一样，区别在于slice支持以负数做索引

  (1) 索引为负数，浏览器处理原理：字符串的长度+ 字符串索引 -> 按照正数处理操作

（2）只写一个参数表示从n开始，截取到最后。

（3）无参数，相当于把整个字符串截取 -> 相当于克隆

************ 大小写转化 ***********************************************************************************

7、str.toUpperCase()

把字母全部大写

8、str.toLowerCase()

把字母全部小写

************ 获取字符索引 ***********************************************************************************

9、str.indexOf()

获取字符在字符串中第一次出现的位置（索引），没找到，则返回-1。

10、str.lastIndexOf()

获取字符在字符串中最后一次出现的位置（索引），没找到，则返回-1。

************ 拆分字符串 ***********************************************************************************

11、str.split(  ) 

字符串转数组的方法，以参数形式，拆分字符串，组成数组的每一项，与数组方法 join() 对应。

以空字符串拆分，这可以结合正则 中的 ?=n 正向预查：匹配出后边紧跟着n的字符，如果前边没有字符，它会按照空字符来匹配，也就是把空字符给匹配出来了，详情见我的正则文章。

没参数拆分

（1）当然参数也支持正则匹配：

实战例子：一个截取路径?后边字符，把后边查询参数以键值对的形式组装起来

const URL = 'http://www.baidu.com/index?name=lxc&age=20'
// 方法一
function splitURL(url) {
    if (url.indexOf("?") === -1) {return false}
    const p = url.split("?")[1].split(/(?:\&)/g) // ?: 匹配不捕获，也就是不输出小括号中的内容
    const r = p.reduce((prev, next)=> {
        prev[next.split("=")[0]] = next.split("=")[1]
        return prev
    }, {})
    return r
}
let r = splitURL(URL) // {name: "lxc", age: "20"}
// 方法二
function splitURL(url) {
    if (url.indexOf("?") === -1) {return false}
    let reg = /([^?&=]+)=([^?&=]+)/g
    let obj = {}
    url.replace(reg, (...$s) => {
        console.log($s)
        obj[$s[1]] = $s[2]
    })
    return obj
}
let r = splitURL(URL) // {name: "lxc", age: "20"}

（2）ES6中还有一种方法可以把字符串转数组

let str = 'hello'
let r = [...str] // ["h", "e", "l", "l", "o"]

************字符串替换 ***********************************************************************************

12、str.replace(n, m)

把m替换成n，在单独使用时，只能替换一次，如果搭配正则，它会替换多次。

此方法搭配正则在项目中很常用。。。

************去除空格***********************************************************************************

13、str.trim（）去除首尾空格

str.trimLeft（）去除开始的空格

str.trimRight( ) 去除结尾的空格

14、补充： Es6 中 padStart( ) / padEnd( ) 字符串补位

在获取当前时间的时候，如果年月日时间是一个数 （2020-5-8）前边会加 0来补位。

padStart( ) / padEnd( ) 一个是在字符串前边补位，一个是在后边补位

  (1) 参数一：需要补多少位

（2）参数二：补的是什么

string.padStart(count, string)

兼容性

小案例：

随机字符串：

// 随机验证码
function randomCode() {
    const RANDOMCODE = '1234567890wqretyiopasdhjklzxcvbn'
    let code = ''
    for(let i = 0; i < 4; i ++) {
        // 上边是32个字符，四舍五入的话最大能到33，所以需要*30，
        // 四舍五入最大到31，正好是字符串最后一位
        let randomIndex = Math.round(Math.random()*30) 
        let rCode = RANDOMCODE[randomIndex]
        console.log(rCode, randomIndex)
        if (code.toLowerCase().indexOf(rCode.toLowerCase()) > -1) {
            i--;
            continue;
        }
        code += rCode
    }
    return code
}