JS 中字符串常用函数

最新推荐文章于 2024-05-05 22:36:39 发布

AsiaFT.

最新推荐文章于 2024-05-05 22:36:39 发布

阅读量413

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_46181452/article/details/126616831

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

JS中字符串常用函数

charAt、 charCodeAt

输出指定位置的字符；
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

字符串的截取：
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

大小写转换
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等