首页 > 代码库 > js字符串操作总结

js字符串操作总结

2024-09-15 22:38:25   220人阅读

字符方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     /*  
  10.     charAt方法和charCodeAt方法都接收一个参数，基于0的字符位置  
  11.     charAt方法是以单字符字符串的形式返回给定位置的那个字符  
  12.     charCodeAt方法获取到的不是字符而是字符编码  
  13.      */  
  14.         var str="hello world";  
  15.         console.log(str.charAt(1));//e  
  16.         console.log(str.charCodeAt(1));//101  
  17.         //还可以使用方括号加数字索引来访问字符串中特定的字符  
  18.         console.log(str[1]);//e  
  19.     </script>  
  20.     </body>  
  21. </html>  

 

字符串操作方法

concat方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>concat方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         var str="hello ";  
  10.         var res=str.concat("world");  
  11.         console.log(res);//hello world  
  12.         console.log(str);//hello    这说明原来字符串的值没有改变  
  13.         var res1=str.concat("nihao","!");  
  14.         console.log(res1);//hello nihao!   说明concat方法可以接收任意多个参数  
  15.         //虽然concat方法是专门用来拼接字符串的，但是实践中我们使用最多的还是加操作符+，因为其简易便行  
  16.     </script>  
  17.     </body>  
  18. </html>  

 

slice方法、substring方法、substr方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串操作方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         /*  
  10.         slice方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置  
  11.         substring方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置  
  12.         substr方法：第一个参数指定子字符串开始位置，第二个参数表示返回的字符个数  
  13.         这三个方法都会返回被操作字符串的一个子字符串，都接收一或两个参数  
  14.         如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。这些方法也不会修改字符串本身，只是返回一个基本类型的字符串值  
  15.          */  
  16.         var str="hello world";  
  17.         console.log(str.slice(3));//lo world  
  18.         console.log(str.substring(3));//lo world  
  19.         console.log(str.substr(3));//lo world  
  20.         console.log(str.slice(3,7));//lo w    7表示子字符串最后一个字符后面的位置   简单理解就是包含头不包含尾  
  21.         console.log(str.substring(3,7));//lo w  
  22.         console.log(str.substr(3,7));//lo worl  7表示返回7个字符  
  23.   
  24.         console.log(str.slice(3,-4));//lo w    -4+11=7表示子字符串最后一个字符后面的位置   简单理解就是包含头不包含尾  
  25.         console.log(str.substring(3,-4));//hel   会转换为console.log(str.substring(3,0));  
  26.         //此外由于这个方法会将较小数作为开始位置，较大数作为结束位置，所以相当于调用console.log(str.substring(0,3));  
  27.         console.log(str.substr(3,-4));//""空字符串  
  28.         console.log(str.substring(3,0));  
  29.     </script>  
  30.     </body>  
  31. </html>  

 

字符串位置方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串位置方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         /*  
  10.         indexOf方法和lastIndexOf方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置，如果没有找到，则返回-1  
  11.         indexOf方法是从字符串的开头向后搜索子字符串，lastIndexOf方法正好相反  
  12.         这两个方法都可以接收两个参数：要查找的子字符串和查找的位置  
  13.          */  
  14.         var str="hello world";  
  15.         console.log(str.indexOf("o"));//4  
  16.         console.log(str.lastIndexOf("o"));//7  
  17.         console.log(str.indexOf("o",6));//7  
  18.         console.log(str.lastIndexOf("o",6));//4  
  19.     </script>  
  20.     </body>  
  21. </html>  

 

trim方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>trim方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         /*  
  10.         trim方法用来删除字符串前后的空格  
  11.          */  
  12.         var str="     hello world      ";  
  13.         console.log(‘(‘+str.trim()+‘)‘);//(hello world)  
  14.         console.log(‘(‘+str+‘)‘);//(     hello world      )  
  15.     </script>  
  16.     </body>  
  17. </html>  

 

字符串大小写转换方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>大小写转换</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         var str="HELLO world";  
  10.         console.log(str.toLowerCase());//hello world  
  11.         console.log(str.toUpperCase());//HELLO WORLD  
  12.     </script>  
  13.     </body>  
  14. </html>  

 

字符串模式匹配方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串模式匹配</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     /*  
  10.     match方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式  
  11.     search方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式  
  12.     search方法返回字符串中第一个匹配项的索引，如果没有匹配项，返回-1  
  13.      */  
  14.     var str="cat,bat,sat,fat";  
  15.     var pattern=/.at/;  
  16.     var matches=str.match(pattern);  
  17.     console.log(matches.index);//0  
  18.     console.log(matches[0]);//cat  
  19.     console.log(pattern.lastIndex);//0  
  20.     //lastIndex表示开始搜索下一个匹配项的字符位置，从0算起  
  21.     var pos=str.search(/at/);  
  22.     console.log(pos);//1  1表示at字符串在原来字符串中第一次出现的位置  
  23.     </script>  
  24.     </body>  
  25. </html>  

 

replace方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>replace方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         var str="cat,bat,sat,fat";  
  10.         var res=str.replace("at","one");//第一个参数是字符串，所以只会替换第一个子字符串  
  11.         console.log(res);//cone,bat,sat,fat  
  12.   
  13.         var res1=str.replace(/at/g,"one");//第一个参数是正则表达式，所以会替换所有的子字符串  
  14.         console.log(res1);//cone,bone,sone,fone  
  15.     </script>  
  16.     </body>  
  17. </html>  

 

split方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>split方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     /*  
  10.     split方法是基于指定的字符，将字符串分割成字符串数组  
  11.     当指定的字符为空字符串时，将会分隔整个字符串  
  12.      */  
  13.         var str="red,blue,green,yellow";  
  14.         console.log(str.split(","));//["red", "blue", "green", "yellow"]  
  15.         console.log(str.split(",",2));//["red", "blue"]   第二个参数用来限制数组大小  
  16.         console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""]  
  17.         //第一项和最后一项为空字符串是因为正则表达式指定的分隔符出现在了子字符串的开头，即"red"和"yellow"  
  18.         //[^...]  不在方括号内的任意字符    只要不是逗号都是分隔符  
  19.     </script>  
  20.     </body>  
  21. </html>  

 

localeCompare方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>localeCompare方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         /*  
  10.         这个方法用于比较两个字符串  
  11.         1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数  
  12.         1.如果字符串等于字符串参数，则返回0  
  13.         1.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数  
  14.          */  
  15.         var str="yellow";  
  16.         console.log(str.localeCompare("brick"));//1  
  17.         console.log(str.localeCompare("yellow"));//0  
  18.         console.log(str.localeCompare("zoo"));//-1  
  19.     </script>  
  20.     </body>  
  21. </html>  

 

fromCharCode方法

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>fromCharCode方法</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.         /*  
  10.         fromCharCode方法是接收一或多个字符编码，然后将其转换为字符串  
  11.         fromCharCode方法是String构造函数的一个静态方法  
  12.          */  
  13.         console.log(String.fromCharCode(104,101,108,108,111));//hello  
  14.     </script>  
  15.     </body>  
  16. </html>  

 

找到匹配字符串所在的各个位置

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串匹配</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     /*找到匹配字符串所在的各个位置*/  
  10.         var str="asadajhjkadaaasdasdasdasd";  
  11.         var position=[];  
  12.         var pos=str.indexOf("d");  
  13.         while(pos>-1){  
  14.             position.push(pos);  
  15.             pos=str.indexOf("d",pos+1);  
  16.         }  
  17.         console.log(position);//[3, 10, 15, 18, 21, 24]  
  18.     </script>  
  19.     </body>  
  20. </html>  

 

字符串去重

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串去重</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     //String.split() 执行的操作与 Array.join 执行的操作是相反的  
  10.     //split() 方法用于把一个字符串分割成字符串数组。  
  11.     //join方法用于将字符串数组连接成一个字符串  
  12.     //如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。  
  13.         var str="aahhgggsssjjj";//这里字符串没有可以分隔的字符，所以需要使用空字符串作为分隔符  
  14.         function unique(msg){  
  15.             var res=[];  
  16.             var arr=msg.split("");  
  17.             //console.log(arr);  
  18.             for(var i=0;i<arr.length;i++){  
  19.                 if(res.indexOf(arr[i])==-1){  
  20.                     res.push(arr[i]);  
  21.                 }  
  22.             }  
  23.             return res.join("");  
  24.         }  
  25.        console.log(unique(str));//ahgsj  
  26.     </script>  
  27.     </body>  
  28. </html>  

 

判断字符串中字符出现的次数

[html] view plain copy 技术分享技术分享
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>字符串操作</title>  
  6.     </head>  
  7.     <body>  
  8.     <script type="text/javascript">  
  9.     /*  
  10.     1.先实现字符串去重  
  11.     2.然后对去重后的数组用for循环操作，分别与原始数组中各个值进行比较，如果相等则count++,循环结束将count保存在sum数组中，然后将count重置为0  
  12.     3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的  
  13.      */  
  14.         var str="aacccbbeeeddd";  
  15.         var sum=[];  
  16.         var res=[];  
  17.         var count=0;  
  18.         var arr=str.split("");  
  19.         for(var i=0;i<arr.length;i++){  
  20.             if(res.indexOf(arr[i])==-1){  
  21.                 res.push(arr[i]);  
  22.             }  
  23.         }  
  24.         for(var i=0;i<res.length;i++){  
  25.             for(var j=0;j<arr.length;j++){  
  26.                 if(arr[j]==res[i]){  
  27.                     count++;  
  28.                 }  
  29.             }  
  30.             sum.push(count);  
  31.             count=0;  
  32.         }  
  33.         console.log(res);//["a", "c", "b", "e", "d"]  
  34.         for(var i=0;i<res.length;i++){  
  35.             var str=(sum[i]%2==0)?"偶数":"奇数";  
  36.             console.log(res[i]+"出现了"+sum[i]+"次");  
  37.             console.log(res[i]+"出现了"+str+"次");  
  38.         }  
  39.     </script>  
  40.     </body>  
  41. </html>  

阿里面试-字符串操作

[javascript] view plain copy 技术分享技术分享
    1. <script type="text/javascript">  
    2.     var str = "www.taobao.com";  
    3.     var res = str.split("").reverse().join("").replace(‘oat‘,‘‘);  
    4.     console.log(res);//moc.oab.www  
    5. </script> 

js字符串操作总结


联系
我们