JS中字符串常用函数

charAt、 charCodeAt

  1. 输出指定位置的字符;
    charAt: 根据索引获取指定位置的字符,和str[i]的作用一样
    harCodeAt: 获取指定索引位置对应字符的ASCII码值
    @params: n, 获取指定字符的索引
    @return: 返回查找到的字符;
    找不到charAt返回空字符串而非undefined,charCodeAt返回NaN。
let str = 'HappyEveryDay';
     console.log(str.charAt(0)); // 'H'
     console.log(str[0]); // 'H'
     console.log(str.charAt(1000)); // ''

     console.log(str.charCodeAt(0)); //72
     console.log(str.charCodeAt(1000)); //NaN
     console.log(String.fromCharCode(72)); //'H', 从ASCII码转为字符

substr、substring、slice

  1. 字符串的截取:
    substr(n,m):从索引n开始,截取m个字符,m不写,截取到末尾, 不影响原来的字符串。
    substring(n,m): 从索引n开始,截取到索引m,不包括m。[n,m),不影响原来的字符串
    slice(n,m): 和substring一样,只不过slice 可以支持负数(可以倒数),其余两个方法不可以,不影响原来的字符串。
let str = 'HappyEveryDay';
        let str1 = str.substr(5, 5);
        console.log(str, str1); //HappyEveryDay Every
        str1 = str.substring(5, 10);
        console.log(str1); //Every
        str1 = str.slice(-8, -3);
        console.log(str.length); //可以用length+索引, 即 13-8=5,13-3=10, 和第二种方法一致。
        console.log(str1); //从倒数第八个字符开始, 取到倒数第三个。 [-8,-3). Every。

indexOf、lastIndexOf、includes

3. 查找字符串中是否包含某个字符或某个整体字符串。
    indexOf:
         @params: (str,m), 从索引m开始查找,是否含有str字符或整体字符串的第一个索引位置;
         @return:返回找到的第一个索引值, 找不到返回-1
    lastIndexOf:
        @params: (str,m), 从索引m开始查找,是否含有str字符或整体字符串的最后一个索引位置;
        @return:返回找到的最后一个索引值, 找不到返回-1
    includes :
         @params:str, 查找当前字符串中是否含有某个str;
         @return: 如果有,返回true, 否则返回false
let str = 'HappyEveryDay';
       let n = str.indexOf('a');
       let m = str.indexOf('Day');
       let x = str.indexOf('*');
       console.log(n, m, x); //1 10 -1

       let n1 = str.lastIndexOf('a');
       let m1 = str.lastIndexOf('Day');
       let x1 = str.lastIndexOf('*');
       console.log(n1, m1, x1); //11 10 -1
       let con = str.includes('*');
       console.log(con); //false
       con = str.includes('Day');
       console.log(con); //true

toUpperCase、toLowerCase

  1. 大小写转换
    toUpperCase:
    * @params:无;
    * @return: 返回大写的字符串, 不影响原来的字符串
    toLowerCase:
let str = 'HappyEveryDay';
         let str1 = str.toUpperCase();
         console.log(str, str1); //HappyEveryDay HAPPYEVERYDAY
         let str2 = str.toLowerCase();
         console.log(str, str2); //HappyEveryDay happyeveryday
         //  仅字符串首字母大写
         str = str.slice(0, 1).toUpperCase() + str.slice(1).toLowerCase();
         console.log(str); //Happyeveryday

split

split([分隔符]): 把字符串按照指定的分隔符拆分成数组(和数组中的join对应,
          join是把数组按照指定的连接符连接成字符串)
          * split 支持传递正则表达式
let str = 'Music|Movie|Song|Sport';
        let hobbyAry=str.split('|'); 
        console.log(hobbyAry);// ["Music","Movie","Song","Sport"]
        str = hobbyAry.join(',');// 数组以逗号连接, 也可以直接toString()
        console.log(str); //"Music,Movie,Song,Sport"

replace

6.replace(老字符,新字符):实现字符串的替换(经常伴随正则表达式使用)。
在不使用正则表达式时,每次调用replace只能替换一次。

let str = 'Music|Movie|Song|Sport';
        let str1=str.replace('|','&');
        console.log(str1); //Music&Movie|Song|Sport, 发现只替换了一个|, 其他仍为|

        // 使用正则可以实现全局替换(类似于word中,替换有两个选择,一个是单独替换,一个是全量替换)
        let strReg = 'Music|Movie|Song|Sport';
        let str1Reg=strReg.replace(/@/g,'&');// /@/g, g代表全局的意思,// 中的@ 表示要查找的字符为@ 
        console.log(str1Reg);  //Music|Movie|Song|Sport

练习1: 将时间转为指定格式:

// 练习: 时间格式转换
        /* 给定一个时间,将其转换为:
        "2022年08月31日 09时17分23秒"
        "2022年08月31日"
        "08/31 09:17"
         */
        let time = '2022-8-31 9:17:23';
        // 先将年月日和时分秒分组
        let date = time.split(' ');
        console.log(date); // ['2022-8-31', '9:17:23']
        // 将第一个数组元素中的- 做切分
        let dateDetail=date[0].split('-');
        console.log(dateDetail); //['2022', '8', '31']
        let hourDetail=date[1].split(':');
        console.log(hourDetail);//['9', '17', '23']
        // 使用箭头函数补0
        let addZero=param=>{
            if(param.length<2) {
                return param='0'+param;
            }
        }
        dateDetail[1]=addZero(dateDetail[1]);
        console.log(dateDetail[1]);
        hourDetail[0]=addZero(hourDetail[0]);
        console.log(hourDetail[0]);
        time=dateDetail[0]+'年'+ dateDetail[1] +'月'+dateDetail[2]+'日'+hourDetail[0]+'时'+hourDetail[1]+'分'+hourDetail[2]+'秒';
        console.log(time);  //2022年08月31日09时17分23秒

注:

let date = time.split(' ');
    console.log(date); // ['2022-8-31', '9:17:23']
    // 将第一个数组元素中的- 做切分
    let dateDetail=date[0].split('-');
    console.log(dateDetail); //['2022', '8', '31']
    let hourDetail=date[1].split(':');
    console.log(hourDetail);//['9', '17', '23']

这三个split 可以直接用一个正则搞定:

let ary = time.split(/(?: |-|:)/g);

练习二: queryURLParams:

function queryURLParams(url){
//  let url = 'https://www.bilibili.com/video/BV1rg411D7nQ?spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90#box';
//  将?号后的值以键值对的形式存储, # 单独存储,键为HASH。
// 1. 获取? # 的索引值
let questionInd=url.indexOf('?');
let wellInd=url.indexOf('#');
// 2. 用substring分别获取两个包含想要内容的字串,左开右闭;
let questionStr = url.substring(questionInd+1,wellInd);
let wellStr=url.substring(wellInd+1);
// console.log(questionStr,wellStr); // spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90 box
let questionStrArr = questionStr.split('&');
let obj = {};
//console.log(questionStrArr); // ['spm_id_from=333.1007.0.0', 'vd_source=b5105a99a0628dd90']
questionStrArr.forEach((item)=>{
    arr=item.split('=');
    let key=arr[0];
    let value =arr[1];
    obj[key]=value;
}); 
obj['HASH']=wellStr;
return obj;
}
let url = 'https://www.bilibili.com/video/BV1rg411D7nQ?spm_id_from=333.1007.0.0&vd_source=b5105a99a0628dd90#box';
console.log(queryURLParams(url));

练习三: 简易验证码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易验证码生成</title>
</head>
<body>
    <input type="text" width="100px" id="inp"/>
    <br/>
    <span width="100px" id='content'></span>
    <button width="100px" id = 'btn'>看不清,换一张</button>
    <script>
        let inp = document.getElementById("inp");
        let content = document.getElementById("content");
        let btn =document.getElementById('btn');
        let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
        function verification(){
            let res='';
            for (let i = 0; i <4; i ++){
                // 下标从0-61
                res+=str[Math.round(Math.random()*(61-1+1))];
            }
            content.innerHTML=res;
        };
        // 第一次加载页面执行方法。
        verification();
        // 点击按钮,需要重新执行方法。将方法给onclick, 方法名不需要加()表示函数定义,() 表示方法执行。
        btn.onclick=verification;
        // input 输入框中输入后,移开鼠标(onblur 事件)校验内容是否正确(表单使用value,非表单元素使用innerHTML)
        inp.onblur=function(){
        if(inp.value.toLowerCase()===content.innerHTML.toLowerCase()){
            alert("校验成功");
        }else
        {
            alert("校验失败,请重新输入!");
            // 清空输入框
            inp.value='';
            verification();
        }
    }
    </script>
</body>
</html>

注:
**表单元素:表单form下可以使用的标签(JQUERY中取值赋值使用:val(),对应JS中value)
文本框、密码框、单选框、复选框、下拉框、文本域、文件域、隐藏域()、(按钮)等
** 非表单元素:
(jQuery中取值赋值使用 html()和text(),对应JS中innerHTML和innerText)
div、span、p、a、h1-h6、table、tr、td、ul、li、ol、font、lable等