字符串常用方法

青旅半醒 2023-03-14 10:44 1阅读 0赞

### 字符串： ###

**索引**

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（inde****x****）**

返回指定索引位置的字符，和 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

**小案例：**

**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
    }

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

**4、str.substr(n, m) **

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

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

![20200517172323105.png][]

**5、substring(n，m)**

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

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

![20200517172605389.png][]

**补充：**

举例：

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

**template - **是字符串模板，每次将正则匹配到的字符删除，在复制给模板，方便下次匹配模板下一个字符；

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

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

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

**6、str.slice(n, m)**

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

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

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

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

![20200517172904394.png][]

![2020051717334299.png][]

![2020051717360499.png][]

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

**7、str.toUpperCase()**

把字母全部大写

**8、str.toLowerCase()**

把字母全部小写

![20200517175554508.png][]

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

**9、str.indexOf()**

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

![20200517180129536.png][]

**10、str.lastIndexOf()**

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

![20200517180732314.png][]

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

**11、str.split(  )**

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

![20200517182153815.png][]

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

![20200517184051599.png][]

没参数拆分

![20200517184149907.png][]

（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"}

![20200517194817745.png][]

**（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)

![20200527084146312.png][]

**兼容性**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

### **小案例：** ###

随机字符串：

// 随机验证码
    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
    }

[20200517172323105.png]: /images/20230312/ca4d68a1345145bd9094bdebba7bd3af.png
[20200517172605389.png]: /images/20230312/f5fa2baa86a8425b8a315a1af33eeffe.png
[20200517172904394.png]: /images/20230312/8ee3b8978cdd4526a1c63b0211151e43.png
[2020051717334299.png]: /images/20230312/81aab9456e264c02ad5d8bcbad964ca2.png
[2020051717360499.png]: /images/20230312/604f75739b5c4b9b852cd3e16fd83c0e.png
[20200517175554508.png]: /images/20230312/361326d4e7a44a1fae09e926000d9c1e.png
[20200517180129536.png]: /images/20230312/8f6c363dc2b849a8883e4c3a65b4cebd.png
[20200517180732314.png]: /images/20230312/91add0527170442999f585bd2fca711b.png
[20200517182153815.png]: /images/20230312/22a2dcf5969f4f819ca48fe32ac2a017.png
[20200517184051599.png]: /images/20230312/c40abb2f76f94b469c43fe7c2bf006ff.png
[20200517184149907.png]: /images/20230312/2143f36396404952aa24cd85339495bc.png
[20200517194817745.png]: /images/20230312/e00c6b08af1c42e5a1b12edd726238cc.png
[20200527084146312.png]: /images/20230312/bc1de29e60484a058a6293996c96b45e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20230312/af6f0cdc54f54b43ab5d0a4ddca0650a.png