前言

细阅此文章大概需要 $\color{red}{20分钟}$ 左右
本篇中 $\color{red}{详细讲述}$ 了：
1. String字符串数据类型简述
2. 其他类型值转换为字符串类型的方法和各种情况
3. 字符串中的常用方法
4. 【案例】时间字符串的处理
5. 【案例】基于日期对象的时间字符串的处理
如果有任何问题都可以留言给我，我看到了就会回复，如果我解决不了也可以一起探讨、学习。如果认为有任何错误都还请您不吝赐教，帮我指正，在下万分感谢。希望今后能和大家共同学习、进步。
下一篇会尽快更新，已经写好的文章也会在今后随着理解加深或者加入一些图解而断断续续的进行修改。
如果觉得这篇文章对您有帮助，还请点个赞支持一下，谢谢大家！

string字符串数据类型

所有用单引号，双引号，反引号（撇 ES6模板字符串）包起来的都是字符串

把其他类型值转换为字符串

两类方法：手动转换和隐式转换

手动转换：

[val].toString
String()

隐式转换：

字符串拼接：加号运算时，如果一遍出现字符串，则是字符串拼接
把对象转换为数字，需要先toString()转换为字符串，再Number()转换为数字
基于alert/confirm/prompt/document.write....这些方式输出的内容，都是把内容先转换为字符串，再输出的
....

1. [val].toString

其他数据类型可以使用toString()方法转换字符串。基本上所有数据类型转换为字符串，都是在外面包一层引号，但是有两种特殊情况
1. null和undefined是禁止直接toString()的
```
//(null)).toString() =>报错
//(undefined)).toString()=>报错
//但是和undefined一样转换为字符串的结果就是'null'/'undefined'
```
2. 【普通对象】使toString则会返回数据类型，而不是字符串
  - 普通对象.toString()的结果都是"[Object Object]"这种样式，因为对象调用的是Object原型上的toString方法↓
  - Object.prototype原型上的toString方法不是转换为字符串的，而是【用来检测数据类型的】
```
console.log(({name:'xxx'}).toString());//=>"[Object Object]"
//调用的是Object原型上的toString方法
```

2.String()

相当于直接将要转换的数据作为参数传入String()函数，并将其作为普通函数执行，这样就会把参数转换成原始的字符串，并返回转换后的值。
```
    String(1);//=>"1"
    String(true);//=>"true"
    String(undefined);//=>"undefined"
    ```
```

3. 运算进行字符串拼接

四则运算法则中，除加法之外，其余都是数学计算，只有加法可能存在字符串拼接（一旦遇到字符串，则不是数学运算，而是字符串拼接）

    console.log('10'+10);//=>'1010'
    console.log('10'+[]);//=>'10'
    console.log(10+[]);//=>'10'
    //减法则会转换为number然后进行数学运算
    console.log('10'-10);//=>0
    console.log('10px'-10);//=>NaN

关键点：
引用类型的数据类型转换为数字，是分为两步的！！！
1. 先toString转为字符串
2. 再Number转为数字 【所以转换为字符串后会再去+运算一次，若发现是字符串则直接进行拼接，这两步之间是要进行一次运算的】

    //面试题
    let a = 10+null+true+[]+undefined+'住在山里真不戳'+null+[]+10+false;
    console.log(a);//=>'11undefined住在山里真不戳null10false'
    /* 
        分析
        //10+null => 10 + 0 => 10
        //10+true => 10 + 1 =>11
        //11+[] => 11 + '' =>'11'【关键一步：引用类型的数据类型转换为数字，是分为两步的！！！】
        //先toString转为字符串，再Number转为数字，所以转换为字符串后会再去+运算一次，发现是字符串所以进行拼接
   		//因为数组是对象所以会先转化为字符串，则空数组就会变成空字符串
        //于是就不会再进一步转换为数字，而是直接进行拼接操作【变成字符串就啥也别想了，直接拼接吧】
        //'11'+undefined =>'11undefined'
        //'11undefined'+'住在山里真不戳' =>'11undefined住在山里真不戳'
        //'11undefined住在山里真不戳'+null =>'11undefined住在山里真不戳null'
        //'11undefined住在山里真不戳null'+[] =>'11undefined住在山里真不戳null'【空数组变空字符串拼接就不用写了】
        //'11undefined住在山里真不戳null'+10+false =>'11undefined住在山里真不戳null10false'
    */

字符串中的常用方法

charAt/charCodeAt【获取指定的位置的字符/对应的码值】

charAt(n)：根据索引获取指定位置的字符

charCodeAt(n)：获取指定字符的ASCII码值(Unicode编码值)

@params
- n[number]获取字符指定的索引

@return

charAt：返回查找到的字符(找不到返回空字符串，永远不是undefined)
charCodeAt：返回查找到的字符(找不到返回空字符串对应的编码值，永远不是undefined)

    let str = 'zhuzaishanlizhenbuchuo';
    console.log(str.charAt(0));//'z'
    console.log(str.[0]);//'z'
    console.log(str.charAt(100000));//'',找不到也永远不会返回undefined
    console.log(str[100000]);//undefined
        //----------------------------------------
    console.log(str.charCodeAt(0));//122
    console.log(String.fromCharCode(122));//'z'//通过码值获得相应字符

substr/substring/slice【实现字符串查找和截取的方法】

$\color{red}{都是为了实现字符串的截取}$
substr(n,m)：根据索引获取指定位置的字符
- @params
  - (n,m)[number]:从索引n开始截取m个字符，【含m】，m不写则是截取到末尾
substring(n,m)：根据索引获取指定位置的字符【不含m】
- @params
  - (n,m)[number]:从索引n开始找到索引为m的地方，【不含m】，m不写则是找到末尾,【m超过最大索引也是查找到末尾】

slice(n,m)：根据索引获取指定位置的字符【不含m】【支持负数索引】

@params
- (n,m)[number]:从索引n开始找到索引为m的地方，【不含m】，m不写则是找到末尾 但是slice可以支持负数作为索引，其余两个方法是不可以的
@return
- 都是返回一个新的字符串，不会修改原有字符串

    let str = 'zhuzaishanlizhenbuchuo';
    console.log(str.substr(3,7));//'zaishan'
    console.log(str.substr(3));//'zaishanlizhenbuchuo'
    console.log(str.substring(3,7));//'zai'
    console.log(str.substring(3,10000));//'zaishanlizhenbuchuo'
    //----------------------------------
    console.log(str.slice(3,7));//'zai'
    console.log(str.substring(-7,-3));//''【substring不支持负数作为索引】
    console.log(str.slice(-7,-3));//'nbuc'【slice可以支持负数作为索引】
    /* 
        快捷查找：负数索引时，我们可以按照【STR.length+负索引】的方式查找
        如 slice(-7,-3)=>slice(22-7,22-3)=>slice(14,19)
     */

indexof/lastIndexOf/includes【检测字符串中某一字符是否存在】【在字符串中兼容所有浏览器】

indexof(x,y):检测当前项在字符串中第一次出现的位置的索引
- @param
  - (x,y):x是要查找的内容，y是控制查找的起始位置索引
lastIndexOf(x):检测当前项在字符串中最后一次出现的位置的索引
- @param
  - x:要检索的这一项内容
- @return
  - 返回这一项出现的位置索引值(数字)，如果数组中没有这一项，返回的结果是-1

includes:检测字符串中是否包含某一项

@param
- x:要检索的这一项内容
@return
- 返回布尔值

        let str = 'zhuzaishanlizhenbuchuo';
        console.log(str.indexOf('n'));//=>9
        console.log(str.lastIndexOf('n'));//=>15
        console.log(str.indexOf('@'));//=>-1【不存在返回-1】
        //若想验证字符串中某一字符是否存在，可以借助这一特点
        if(str.indexOf('@')===-1){
            //成立则不包含这个字符
        }
        console.log(str.indexOf('zai'));//=>3
        //验证整体第一次出现的位置，返回的索引是第一个字符所在位置的索引值
        console.log(str.indexOf('zh',7));//=>12
        //从索引7开始向后查找

        if(!str.includes('@')){
            console.log('当前字符串不包含'@'')
        }

toUpperCase/toLowerCase【字符串中字母的大小写转换】

toUpperCase:转大写

toLowerCase:转小写

@return
- 返回转换完成后的字符串

    let str = 'zhuzaishanlizhenbuchuo';
    str = str.toUpperCase();
    console.log(str);//=>'ZHUZAISHANLIZHENBUCHUO'
    str = str.toLowerCase();
    console.log(str);//=>'zhuzaishanlizhenbuchuo'
   		//
    str = 'ZhuZaiShanLiZhenBuChuo';
    console.log(str);//=>'ZHUZAISHANLIZHENBUCHUO'
    str = 'ZhuZaiShanLiZhenBuChuo';
    console.log(str);//=>'zhuzaishanlizhenbuchuo'
   		//
    str = str.substr(0,1).toUpperCase+str.substr(1);
    //=>'Zhuzaishanlizhenbuchuo'

split【把字符串按照指定的分隔符拆分成数组】【与数组中的join对应】

split('[分隔符]'):把字符串按照指定的分隔符拆分成数组

@param
- ('[分隔符]'):指定一个分隔符
- 支持传递正则表达式
@return
- 返回在给定字符串中出现分隔符的每一个点上进行分割而成的字符串数组。

//把竖线分隔符变为，分隔符
        let str = 'zhu|zai|shan|li|zhen|bu|chuo';
        let ary = str.split('|');
        console.log(ary);//=>['zhu','zai','shan','li','zhen','bu','chuo']
        str = ary.join('#');
        console.log(str);//=>'zhu#zai#shan#li#zhen#bu#chuo'
        let ary = str.split('#');
        str = ary.toString();//本来就是按逗号分隔直接转字符串和ary.join(',')效果一样。
        console.log(str);//=>'zhu,zai,shan,li,zhen,bu,chuo'

replace【实现字符串的替换】【经常伴随着正则使用】

replace([老字符]，[新字符]):实现字符串的替换

@param
- ([老字符]，[新字符]):实现字符串的替换(经常伴随着正则使用)
- 在不使用正则表达式的情况下，每执行一次只替换一个字符
@return
- 返回替换后字符串

        let str = '住@在@山里@真不戳';
        str = str.replace('@','-');
        console.log(str);//=>'住-在@山里@真不戳'
        str = str.replace(/@/g,'-');//使用正则表达式实现一次替换完成
        console.log(str);//=>'住-在-山里-真不戳'

match【在字符串内检索指定的值】【经常伴随着正则使用】

match([正则表达式]):在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
- @param
  - ([正则表达式])：
    1. 若正则表达式有全局标志g，则 会对字符串进行全部匹配，所有匹配值都将存放到作为返回值的数组中。
    2. 若正则表达式没有全局标志g，则match() 方法就 只能在指定字符串中执行一次匹配。
    3. 若参数不是正则表达式（正则对象），则会先传递给RegExp构造函数，将其转换为正则对象，再进行匹配 只能在指定字符串中执行一次匹配。
- @return
  - 返回一个存放匹配结果的数组。
  - 若没有找到任何匹配的值，则会返回null
```
        let str = '住@在@山里@真不戳',
            strArr1,
            strArr2,
            strArr3;
        strArr1 = str.match('@');
        console.log(strArr1);//=>['@']
        strArr2 = str.match(/@/g);
        console.log(strArr2);//=> ["@", "@", "@"]
        strArr3 = str.match(/-/g);
        console.log(strArr3);//=>null
```

trim【去除字符串的头尾空格】

（此效果可通过replace来实现，避免兼容问题）

trim():去除字符串的头尾空格（不会改变原始的字符串）

@return
- 返回一个新的字符串

        let str = '        住在山里真不戳         ',
            str1;
        str1 = str.trim();
        console.log(str1);//=>'住在山里真不戳'

trimLeft【删除字符串左侧的空格】

trimLeft():删除字符串左侧的空格

@return
- 返回一个新的字符串（不会改变原始的字符串）

        let str = '        住在山里真不戳         1',
            str1;
        str1 = str.trimLeft();
        console.log(str1);//=>'住在山里真不戳         1'

trimRight【删除字符串末尾的空格】

trimRight():删除字符串末尾的空格

@return
- 返回一个新的字符串（不会改变原始的字符串）

        let str = '        住在山里真不戳         ',
            str1;
        str1 = str.trimRight();
        console.log(str1);//=>'住在山里真不戳         '

【小案例】时间字符串的处理的案例1

时间字符串的处理
将得到的字符串转化为自己想要的任何格式

    let time = '2020-07-31 12:19:23';
    //变为自己需要呈现出来的格式
    //'2020年07月31日 12时19分23秒'
    //'2020年07月31日'
    //'07/24 12:06'
    //....
    //========自己写的replace垃圾....=====
    time = time.substr(0,5).replace(/-/g,'年')+time.substr(5,3).replace(/-/g,'月')+time.substr(8,2)+'日 '+time.substr(11,3).replace(/:/g,'时')+time.substr(14,3).replace(/:/g,'分')+time.substr(17)+'秒';
    console.log(time);
    //==========方案2：一路replace============
    let time1 = '2020-07-31 12:19:23';
    time1 = time1.replace('-','年').replace('-','月').replace(' ','日').replace(':','时').replace(':','分')+'秒';
    console.log(time1);
    //==========方案3：获取年月日时分秒这几个值后，最后想拼成什么就拼成什么
    //获取值的方法【1】，基于indexOf获取指定符号索引，基于substring一点点截取数据
    let time2 = '2020-07-31 12:19:23';
    let n = time2.indexOf('-');
    let m = time2.lastIndexOf('-');
    let x = time2.indexOf(' ');
    let y = time2.indexOf(':');
    let z = time2.lastIndexOf(':');
    let year = time2.substring(0,n);
    let month = time2.substring(n+1,m);
    let day = time2.substring(m+1,x);
    let hour = time2.substring(x+1,y);
    let minute = time2.substring(y+1,z);
    let second = time2.substring(z+1);
    console.log(year,month,day,hour,minute,second);
    //获取值的方法【2】，基于split一项一项拆分
    let n1 = time2.split(' ');//['2020-07-31','12:19:23']
    let m1 = n1[0].split('-');//['2020','07','31']
    let o1 = n1[1].split(':');//['12','19','23']
    //获取值的方法【3】，基于split和正则表达式一步拆分
    let ary = time2.split(/?: |-|:/g);//['2020','07','31','12','19','23']
    time3 = ary[0]+'年'+addZore(ary[1])+'月'+addZore(ary[2])+'日'+addZore(ary[3])+'时'+addZore(ary[4])+'分'+addZore(ary[5])+'秒';
    //封装一个不足十位补一个零的方法
    /* let addZore = val=>{
        if(val.length<2){
            val = '0'+val;
        }
        return val;
    } */
    let addZore = val => val.length < 2 ? val = '0'+ val : val;

【小案例】时间字符串的处理的案例2

基于日期事件对象处理

    let time = '2020-08-03 17:35:55';
    //变为自己需要呈现出来的格式
    //'2020年08月03日 17时35分55秒'

    //=================================
    function formatTime(time){
    /* 先加上不足十位补零的方法 */
    function addZore  (val){
        val = Number(val);
        return val<10?'0'+val:val;
    } 
     //1.把时间字符串变为标准日期对象
    time = time.replace(/-/g,'/');
    time.new Date(time);
    //2.基于日期时间对象获取详细信息
    let year = time.getFullYear(),
        month = addZero(time.getMonth()+1),
        day = addZero(time.getDate()),
        hours = addZero(time.getHours()),
        minutes = addZero(time.getMinutes()),
        seconds = addZero(time.getSeconds());
    //3.返回想要的结果
    return year+'年'+month+'月'+day+'日  '+ hours+':'+minutes+':'+seconds;
    }
    //------------------使用----------------------
    time = formatTime(time);
    console.log(time);

前端系统化学习【JS篇】:（四-2）基本数据类型之String篇

前言