[JS]【二】---基本数据类型之【String篇】

string字符串数据类型

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

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

1. [val].toString
2. String()

隐式转换：

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

类型转换==>

运算进行字符串拼接

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

  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'
    */

字符串中的常用方法

【迭代】【解构】字符串的迭代和解构

字符串的原型暴露一个@@iterator方法，可以迭代每个字符：

let str = "abc"
let res = str[Symbol.iterator]();
res.next(); // =>{value:"a",done:false}
res.next(); // =>{value:"b",done:false}
res.next(); // =>{value:"c",done:false}
res.next(); // =>{value:undefined,done:true}

for-of循环也可以迭代

let str = "abc"
for(let res of str){
 console.log(res)
}
// a //b//c/

重点：解构赋值

let str = "abcde"
let res = [...str] // =>["a", "b", "c", "d", "e"]

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

• charAt(index)：默认值为 0 ; `根据索引获取指定位置的字符

• charCodeAt(index)：获取指定字符的ASCII码值(Unicode编码值) （不常用）

  @params：都是索引【number】

  @return：

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

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

【检测】indexof/lastIndexOf/includes【检测字符串中某一字符是否存在】返回值与charAt相反

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('当前字符串不包含'@'')
        }

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

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

• @params
  • (n,m)[number]:截取从索引n开始截取m个字符，【含m】，m不写则是截取到末尾

**substring(n,m)：根据索引获取指定位置的字符

• @params
  • (n,m)[number]:截取从索引n开始找到索引为m索引的地方，【不含m】，m不写则是找到末尾,【m超过最大索引也是查找到末尾】

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

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

    let str = 'hello world';
    console.log(str.substr(3));//'lo world'
    console.log(str.substring(3));//'lo world'
    console.log(str.slice(3));//'lo world'

    console.log(str.substr(3,7));//'lo world'
    console.log(str.substring(3,7));//"lo w"
    console.log(str.slice(3,7));//'lo w'  
    console.log(str.substring(3,10000));//'lo world 超出索引最大值或最大数 返回后面全部'
   	console.log(str.substr(3,-2));//''【substr不支持负数作为索引】
    console.log(str.substring(-7,-3));//''【substring不支持负数作为索引】
    //----------------------------------
 	console.log(str.slice(true)); // ello world
    console.log(str.slice(false));// hello world
    console.log(str.slice(null)); // hello world
    console.log(str.slice(undefined)); // hello world
	/* true ==>1 false/null/undefined都视为0*/
    console.log(str.slice(-7,-3));//'nbuc'【slice可以支持负数作为索引】
    /* 
        快捷查找：负数索引时，我们可以按照【STR.length+负索引】的方式查找
        如 slice(-7,-3)=>slice(22-7,22-3)=>slice(15,19)
     */ 

负数情况

当第一个参数为负数时：

1. slice()和substr()方法 =>参数 = str.length（字符串长度）+ 负索引
2. substring() 会把负数转换成0

 let str = 'hello world';
 console.log(str.slice(-3));//'rld' 和substr 一样
 console.log(str.substr(-3));//'rld' => 11+(-3) = 8 相当于=>str.substr(8)
 console.log(str.substring(-3)); // hello world

当第二个参数为负数时：

1. substr()=>会把第二参数变成0 意思获得零个字符串空字符串
2. slice() =>参数 = str.length（字符串长度）+ 负索引
3. substring() 会把负数转换成0 而且会把较小都数作为开始位置

 let str = 'hello world';
console.log(str.slice(3，-4));//'lo w'
 console.log(str.substr(3，-4));//“”空字符串
 console.log(str.substring(3，-4)); // hel 先变成substring(3,0)=>最小位置在前substring(0,3)

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

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

• @param

  • ('[分隔符]'):指定一个分隔符 支持传递正则表达式

    如果不传参数-->返回整个字符串的一个数组

    如果传空字符-->返回每个字符的数组

  • 第二参数为拆分长度

• @return

  • 一个字符串数组

//把竖线分隔符变为，分隔符
        let str = 'tom is good man!';
        let ary = str.split(' ');
        console.log(ary);//=>["tom", "is", "good", "man!"]
		let ary2 = str.split(' ',3); 
		console.log(ary2);//=>["tom", "is", "good"]
		let ary3 = str.split(); 
		console.log(ary3);//=>["tom is good man!"]
		let ary4 = str.split(''); 
		console.log(ary4);//=>["t", "o", "m", " ", "i", "s", " ", "g", "o", "o", "d", " ", "m", "a", "n", "!"]
//------------------------------------
        str = ary.join('|');
        console.log(str);//=>'tom丨is丨good丨man!'
        let ary = str.split('丨');
        str = ary.toString();//本来就是按逗号分隔直接转字符串和ary.join(',')效果一样。
        console.log(str);//=> tom,is,good,man!

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

match(正则表达式/字符串/RegExp对象):在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

• @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

search(正则表达式/字符串/RegExp对象)唯一参数和match一样，返回结果为第一个匹配的位置的索引，如果没有返回 -1

let str = '住@在@山里@真不戳'
strArr1 = str.search('@');
console.log(strArr1);//=>  1
strArr2 = str.search('aaa');
console.log(strArr2);//=> -1

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

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

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

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

【大小写】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'
  

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

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

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

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

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

【去空格】trimLeft【删除字符串左侧的空格】trimRight【删除字符串末尾的空格】

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

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

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

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

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

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

【重复生成】repeat

• @param

  整数参数，设置要复制的次数。

  下例是根据参数重复生成星号
  function star(num = 3) {
  	return '*'.repeat(num);
  }
  console.log(star());  //***
  

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

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

    let time = '2020-07-31 12:19:23';
    //变为自己需要呈现出来的格式
    //'2020年07月31日 12时19分23秒'
    //'2020年07月31日'
    //'07/24 12:06'
    //....

    //==========方案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);