巧妙驾驭JavaScript字符串：常用方法大揭秘-灵析社区

Ned

数组去重案例

function fnNoRepeatOfArray(arr){
    var list = [];
    arr.forEach(function(value){
        if(list.indexOf(value) === -1){
            list.push(value);
        }
    })
    return list;
}
function fn(arr){
    for(var i = 0,len = arr.length;i < len;i ++){
        for(var j = i + 1;j < len;j ++){
            if(arr[i] === arr[j]){
                arr.splice(j,1);
            }
        }
    }
    return arr;
}
function fn(arr){
    var list = [];
    arr.sort(function(a,b){return a - b;});
    arr.forEach(function(value,index){
        if(value !== arr[index + 1]){
            list.push(value);
        }
    })
    return list;
}

字符串常用方法

如何声明

  1. 字面量方式： '' ""
  2. 构造函数方式： new String()
    <script>
        //创建字符串
        var str = 'hello';
        var o_str = new String('world');
        console.log(typeof str,typeof o_str); //'string' 'object'
    </script>

属性

  1. length : 长度

方法 (查、替、截、转)

查
  1. indexOf('字符串',start) : 查找子串在父串中第一次出现的下标位置，如果没有，则返回-1
var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do',5)); //11
console.log(str.indexOf('do',4)); //4

2. lastIndexOf('字符串',start) : 查找子串在父串中从右向左查找第一次出现的下标位置，如果没有找到，返回 -1

var str = 'how do you do';
console.log(str.indexOf('do')); //4
console.log(str.indexOf('de')); //-1
console.log(str.indexOf('do',5)); //11
console.log(str.indexOf('do',4)); //4
​
console.log(str.lastIndexOf('do')); //11
console.log(str.lastIndexOf('de')); //-1
console.log(str.lastIndexOf('do',5)); //4
console.log(str.lastIndexOf('do',4)); //4

3. charAt(index) : 根据下标查找字符。

4. charCodeAt(index) : 根据下标查找字符编码。

替
  1. replace(旧串，新串) : 替换字符串
//声明字符串
var str = 'how do you do';
console.log(str.replace('do','de')); //'how de you do'
​
// for(var i = 0;i < str.length;i ++){
//     str = str.replace('do','de');
// }
​
while(str.indexOf('do') !== -1){
    str = str.replace('do','de');
}
console.log(str);
截
  1. substring(start,end) : 从哪截取到哪，支持参数互换、不支持负数
  2. substr(start,length) ：从哪截取多少个
  3. slice(start,end) ：从哪截取到哪，不支持参数互换、支持负数
var str = 'how do you do';
console.log(str.substring(4)); //do you do
console.log(str.substr(4)); //do you do
console.log(str.slice(4));//do you do
​
console.log(str.substring(4,6)); //do
console.log(str.substr(4,6)); //do you
console.log(str.slice(4,6));//do
​
console.log(str.substring(6,4)); //do
console.log(str.slice(6,4));//''
​
​
console.log(str.substring(-6,-4)); //''
console.log(str.slice(-6,-4));//'yo'
转
  1. toUpperCase() : 将小写转为大写字母
  2. toLowerCase() : 将大写转为小写字母
  3. split('切割符',length) : 将字符串切割为数组
   <script>
        var str = 'How Are You';
        //小写转为大写
        console.log(str.toUpperCase()); //'HOW ARE YOU';
        //大写转为小写
        console.log(str.toLowerCase()); //'how are you'
        //字符串转为数组
        var arr = str.split(' ',5); //['How','Are','You']
        console.log(arr);
        console.log(str.split('o')); //['H','w Are Y','u']
        console.log(str.split('')); //['H','o','w',' ','A','r','e',' ','Y','o','u']
        console.log(str.split(' ',2)); //['How',"Are"];
        console.log(str.split('oo')); //['How Are You'];
    </script>
var str = 'How Are You';
console.log(str.toUpperCase()); //HOW ARE YOU
console.log(str.toLowerCase()); //how are you
var arr = str.split(' ',2); //['How', 'Are']
console.log(arr);
拼
  1. concat() : 合并字符串
var str = 'hello';
console.log(str.concat(' world')); // hello world
去空白
  1. trim() ： 删除字符串两端空白
var str = '     a     b    ';
console.log('(' + str.trim() + ')');  //(a     b)

2. trimStart() : 删除字符串左端空白

var str = '    a    b    ';
console.log('(' + str.trimStart() + ')');  //(a    b    )

3. trimEnd() : 删除字符串右端空白

var str = '    a    b    ';
console.log('(' + str.trimEnd() + ')');  //(    a    b    )
    <script>
        var str = '       a      b       ';
        //去除所有空白
        console.log('(' + str.replaceAll(' ','') + ')');
        //去除左右两端的空白
        console.log('(' + str.trim() + ')');
        //去除左端空白
        console.log('(' + str.trimStart() + ')');
        //去除右端空白
        console.log('(' + str.trimEnd() + ')');
    </script>

静态方法

  1. String.fromCharCode(编码) : 根据编码返回字符

字符串操作相关案例

  1. 去除字符串中所有的空格。
  <script>
        //去除字符串中所有的空格。
        function fnRemoveAllSpace(str){
            while(str.indexOf(' ') !== -1){
                str = str.replace(' ','');
            }
            return str;
        }
        console.log('(' + fnRemoveAllSpace('     a     b     ') + ')');
    </script>

2. 去除字符串中左边的空格与右边的空格 “ a b “ “a b” (不能使用trim方法)

    <script>
        //去除字符串中左边的空格与右边的空格 “  a  b  “  “a  b”  (不能使用trim方法)
        function fnTrim(str){
            //1. 去除左边的空白
            while(str.charAt(0) === ' '){
                str = str.replace(' ','');
            }
            //2. 去除右边的空白
            var arr = str.split('');
            //    找到数组中最后一个元素判断是否为空格
            while(arr[arr.length - 1] === ' '){
                arr.pop(); //删除数组中后面的元素
            }
            return arr.join('');
        }
        console.log('(' + fnTrim('      a     b     ') + ')');
    </script>

3. 统计出一个字符串中所有大写字母的数量与所有小写字母的数量

    <script>
        //统计出一个字符串中所有大写字母的数量与所有小写字母的数量
        // ch >= 'A' && ch <= 'Z'
        // ch >= 'a' && ch <= 'z'
        function countNum(str){
            //1. 准备两个变量，用于放置结果
            var uppercase = 0;
            var lowercase = 0;
            //2. 遍历字符串
            for(var i = 0,len = str.length;i < len;i ++){
                //记录每一个字符
                var ch = str.charAt(i);
                //判断
                if(ch >= 'A' && ch <= 'Z'){
                    uppercase ++;
                }else if(ch >= 'a' && ch <= 'z'){
                    lowercase ++;
                }
            }
            console.log('大写字母有：' + uppercase + '个\n小写字母有：' + lowercase + '个');
        }
        countNum('How Are You');
    </script>

4. 一次性输入多个成绩

 <script>
        //一次性输入多个成绩
        //一、 获取页面元素
        var o_txt = document.getElementById('txt');
        var o_btn = document.getElementById('btn');
        //二、实现功能
        function fn(){
            //1. 采集用户信息
            // '1,2,3,4,5'
            var info = o_txt.value;
            //2. 转为数组
            var arr = info.split(','); //['1','2','3','4','5']
            //3. 求和
            var sum = arr.reduce(function(prev,next){
                return Number(prev) + Number(next);
            })
            //4. 将总成绩放到文本框中
            o_txt.value = sum;
        }
        //三、添加事件
        o_btn.onclick = fn;
    </script>

5. 影响职业因素

<!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>Document</title>
</head>
<body>
    <h1>影响职业因素</h1>
    <p>请输入一个单词： <input type="text" name="" id="txt"></p>
    <p>结果： <span id="result"></span></p>
    <p>
        <input type="button" value="计算" id="submit">
        <input type="button" value="清空" id="reset">
    </p>
    <script>
        //影响职业因素,将单词中的每一个字母在字母表中的位置相加。如： abc   1 + 2 + 3 = 6
 
        //一、获取页面元素
        //1.1 获取单词的文本框
        var o_txt = document.getElementById('txt');
        //1.2 获取结果的容器
        var o_result = document.getElementById('result');
        //1.3 获取计算按钮
        var o_submit = document.getElementById('submit');
        //1.4 获取清空按钮
        var o_reset = document.getElementById('reset');
        //二、实现功能
        //2.1 求职业因素的功能
        function fnJob(){
            //0. 准备变量，存储结果
            var sum = 0;
            var str = '';
            //1. 采集用户信息
            var info = o_txt.value; //'money'
            //2. 字母表
            var letter = ' abcdefghijklmnopqrstuvwxyz';
            //3. 遍历用户单词
            for(var i = 0,infoLen = info.length;i < infoLen;i ++){
                //遍历字母表
                for(j = 0,letterLen = letter.length;j < letterLen;j ++){
                    //进行比较
                    if(info.charAt(i) === letter.charAt(j)){
                        //求和
                        sum += j;
                        //求表达式
                        str += j + '+'; //1 + 2 + 3 +
                    }
                }
            }
            //将结果放到页面中
            // '1+2+3+'  '1+2+3=6'
            o_result.innerText =  str.slice(0,-1) + '=' + sum;
        }
        //2.2 清空所有的框
        function fnclear(){
            o_txt.value = o_result.innerText = '';
        }
        //三、添加事件
        o_submit.onclick = fnJob;
        o_reset.onclick = fnclear;
    </script>
</body>
</html>

字符串的加密解密

   <script>
        //一、获取页面元素
        //1.1 文本框
        var o_txt = document.getElementById('txt');
        //1.2 加密按钮
        var o_secure = document.getElementById('secure');
        //1.3 解密按钮
        var o_unse = document.getElementById('unsecure');
        //1.4 盒子
        var o_box = document.getElementById('box');
        //二、封装功能
        //2.1 加密
        function fnSecure(){
            //0. 准备一个放置结果的字符串
            var str = '';
            //1. 采集加密的信息
            var info = o_txt.value;
            //2. 找到字符串中每一个字符（遍历），获取字符的编码值（charCodeAt) 进行 加一个数 或 减一个数 ，最后将改变后的编码值再转为字符
            for(var i = 0,len = info.length;i < len;i ++){
                str += String.fromCharCode(info.charCodeAt(i) + 88)
            }
            //3. 将加密后的内容放到页面中盒子中
            o_box.innerText = str;
            //4. 清空文本框中的内容
            o_txt.value = '';
        }
        //2.2 解密
        function fnUnSe(){
            //0. 准备一个解密的的字符串
            var str = '';
            //1. 采集已加密后的信息
            var info = o_box.innerText;
            //2. 遍历出每一个加密后的字符，进行还原
            for(var i = 0,len = info.length;i < len;i ++){
                str += String.fromCharCode(info.charCodeAt(i) - 88);
            }
            //3. 将解密后的内容放到文本框中
            o_txt.value = str;
            //4. 清空盒子中的内容
            o_box.innerText = '';
        }
        //三、添加事件
        //3.1 加密按钮添加点击事件
        o_secure.onclick = fnSecure;
        //3.2 解密按钮添加点击事件
        o_unse.onclick = fnUnSe;
    </script>

小结

JavaScript中有许多常用的字符串方法，它们可以帮助你对字符串进行各种操作。以下是一些常见的字符串方法及其简要说明：

  1. length用于获取字符串的长度。
  2. charAt(index)返回指定索引位置的字符。
  3. charCodeAt(index)返回指定索引位置的字符的 Unicode 值。
  4. concat(str1, str2, ...)用于连接两个或多个字符串。
  5. indexOf(substring, start)返回指定子字符串第一次出现的位置，可指定搜索的起始位置。
  6. lastIndexOf(substring, start)返回指定子字符串最后一次出现的位置，可指定搜索的起始位置。
  7. slice(start, end)提取字符串的一部分，并返回一个新的字符串，可以指定开始和结束的位置。
  8. substring(start, end)类似于slice，不同之处在于当start大于end时会交换参数位置。
  9. substr(start, length)从起始索引位置提取指定长度的字符串。
  10. toUpperCase()将字符串转换为大写。
  11. toLowerCase()将字符串转换为小写。
  12. trim()去除字符串两端的空白字符。
  13. split(separator)将字符串分割成子字符串数组，可指定分隔符。
  14. replace(searchValue, replaceValue)替换字符串中的指定值。
  15. match(regexp)检索字符串中指定值，返回匹配的字符串数组。

这些方法只是 JavaScript 中可用的众多字符串方法中的一部分。通过灵活运用这些方法，你可以在处理字符串时更加高效和便捷。

阅读量：1031

点赞量：0

收藏量:0