JS的字符串操作-优快云博客

本文链接：https://blog.youkuaiyun.com/Milky_Yankee/article/details/116243827

本文详细介绍了JavaScript中字符串的各种操作，包括转换大小写、去除空格、拼接、分割、补齐、截取以及查找字符串的方法，并提供了一个综合案例，展示了如何在实际场景中应用这些操作。通过学习，你可以更好地掌握JavaScript字符串处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS的字符串操作

全部大写 toUpperCase();

var str = "To the world you may be one person, but to one person you may be the world . ";
console.log( str.toUpperCase() );

全部小写 toLowerCase()

console.log( str.toLowerCase() );

去除空格 trim()

console.log( str.trim() );
// trimRight() 去掉字符串右边(末端)的空格
// trimLeft() 去掉字符串左边(始端)的空格

拼接字符串 str.concat(str1,str2) => str+str1+str2

let str2 = “test from 2021/4/28”;
content.innerText = str.concat(’-----’,str2);

分割字符串以数组存储
//str.split(’’) 分割每个字符
//str.split(’ ') 以空格为分隔符

str.split(’’);
// T,o, ,t,h,e, ,w,o,r,l,d, ,y,o,u, ,m,a,y, ,b,e, ,o,n,e, ,p,e,r,s,o,n, ,b,u,t, ,t,o, ,o,n,e, ,p,e,r,s,o,n, ,y,o,u, ,m,a,y, ,b,e, ,t,h,e, ,w,o,r,l,d, ,.

补齐字符串——strlen为结果字符串的长度，"-“为补齐的内容
// str.padEnd(strlen,"-") => str+”-"在末尾补齐到长度为strlen，
// str.padStart(strlen,"-") => “-”+str在始端补齐到长度为strlen。

document.write( str.padStart(88,"-") )；

截取字符串
// str.substring(start,end)——start,end不分前后，即start可以大于end
//str.slice(start,end)——start,end要分前后，即start不可以大于end，若想从后面开始向前查找则需要加’-‘
//str.substr(from,length) 与前两者不同，这是从from位置截取length长度的字符串

str.substring(0,6)；【To the】
str.substring(6,3)；【the】
str.slice(6,3)；【】
str.slice(-7,-2)；【world】
str.substr(3,6); 【the wo】

查找字符串
// indexOf(str,int) 有则返回开始位置，无则返回-1; int 可以设置开始寻找str的位置
// lastIndexOf(str) 从string的末尾开始寻找到开头
// includes(str) 有则返回true，无则false

str.indexOf(“the”)；【3】
str.lastIndexOf(“the”)；【65】
str.includes(“the”)；【true】

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String</title>
</head>
<body>
<p id="main">  To the world you may be one person, but to one person you may be the world .   </p>
<p id="result"></p>
<p><button>全部大写</button></p>
<p><button>全部小写</button></p>
<p><button>去除空格</button></p>
<p><button>串接字符串</button></p>
<p><input type="text" placeholder="分隔符">&nbsp;<button>分割字符串</button></p>
<p><input type="number" placeholder="字符串长度"> <input type="text" placeholder="补齐的字符"> &nbsp;<button>补齐字符串</button></p>
<p><input type="text" placeholder="start"> <input type="text" placeholder="end">&nbsp;<button>截取字符串</button></p>
<p><input type="text" value=""> &nbsp; <button>查找字符串</button> &nbsp; <span id="loca"></span></p>
<script>
    let str = document.getElementById('main').innerText;
    let content = document.getElementById('result');
    let p = document.querySelectorAll("p");
    let inputs = document.querySelectorAll('input');
    let btns = document.querySelectorAll("button");
    //大写
    btns[0].onclick = function (){
        content.innerText = str.toUpperCase();
    }
    //小写
    btns[1].onclick = function (){
        content.innerText = str.toLowerCase();
    }
    //  去除空格
    btns[2].onclick = function (){
        content.innerText = str.trim();
    }
    //串接字符串 str.concat(str1) => str+str1
    btns[3].onclick = function (){
        let str2 = "test from 2021/4/28";
        content.innerText = str.concat('-----',str2);
    }
    //分割字符串, 以数组存储
    //str.split('') 分割每个字符
    //str.split(' ') 以空格为分隔符
    btns[4].onclick = function (){
        let sp = inputs[0].value || '';
        content.innerText = str.split(sp);
    }
    //补齐字符串 str.padEnd(strlen,"*") => str+"*"在末尾补齐到长度为strlen，
    // str.padStart(strlen,"*") => "*"+str在始端补齐到长度为strlen。
    btns[5].onclick = function (){
        let strlen = inputs[1].value;
        let strpad = inputs[2].value;
        // content.innerText = str.padEnd(strlen,strpad);
        content.innerText = str.padStart(strlen,strpad);
    }
    //截取字符串
    btns[6].onclick = function (){
        let start = inputs[3].value || 0;
        let end = inputs[4].value || str.length;
        let from = inputs[3].value || 0;
        let len = inputs[4].value || str.length;
        //str.substring(start,end) start,end不分前后，即start可以大于end
        // content.innerText = str.substring(start,end);
        //str.slice(start,end) start,end要分前后，即start不可以大于end，若想从后面开始向前查找 则需要’-10‘
        // content.innerText = str.slice(start,end);
        //str.substr(from,length)
        content.innerText = str.substr(from,len);
    }

    //查找字符串 indexOf(str,int) 有则返回开始位置，无则返回-1; int 可以设置开始寻找str的位置
    //lastIndexOf(str) 从string的末尾开始寻找到开头
    // includes(str) 有则true，无则false
    btns[7].onclick = function (){
        let search = inputs[5].value;
        let location = document.getElementById('loca');
        // var flag = str.indexOf(search);
        // var flag = str.lastIndexOf(search);
        var flag = str.includes(search);
        if(flag===-1){
            location.innerHTML = "没有找到 "+search;
        }else{
            location.innerHTML = "找到 "+search+" ,从 "+flag+" 开始";
        }
    }
</script>
</body>
</html>