JavaScript中字符串的常用方法
一、普通方法
1.字符方法
动态方法：1、str.charAt(index); 返回子字符串，index为字符串下标，index取值范围[0,str.length-1]
动态方法：2、str.charCodeAt(index); 返回子字符串的unicode编码，index取值范围同上
静态方法：3、String.fromCharCode(num1,num2,...,numN); 根据unicode编码返回字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符方法</title>
</head>
<body>
<script type="text/javascript">
/*
charAt方法和charCodeAt方法都接收一个参数，基于0的字符位置
charAt方法是以单字符字符串的形式返回给定位置的那个字符
charCodeAt方法获取到的不是字符而是字符编码
*/
var str="hello world";
console.log(str.charAt(1));//e
console.log(str.charCodeAt(1));//101
//还可以使用方括号加数字索引来访问字符串中特定的字符
console.log(str[1]);//e
</script>
</body>
</html>
2.字符串操作方法
concat方法 专门用来拼接字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>concat方法</title>
</head>
<body>
<script type="text/javascript">
var str="hello ";
var res=str.concat("world");
console.log(res);//hello world
console.log(str);//hello 这说明原来字符串的值没有改变
var res1=str.concat("nihao","!");
console.log(res1);//hello nihao! 说明concat方法可以接收任意多个参数
//虽然concat方法是专门用来拼接字符串的，但是实践中我们使用最多的还是加操作符+，因为其简易便行
</script>
</body>
</html>
3.截取字符串
slice方法、substring方法、substr方法：
- str.substring(start,end); 两个参数都为正数，返回值：[start,end) 也就是说返回从start到end-1的字符
- str.slice(start,end); 两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从start到end-1的字符
不建议用：str.substr(start,length); start参数可正可负，负数代表从右截取
除了 slice() 和 substr() 方法里的负值是代表从右截取，其他方法里的负值一律作为0处理
【引申】：截取数组
arr.slice(start,end); 两个参数可正可负，负值代表从右截取，返回值：[start,end) 也就是说返回从start到end-1的字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串操作方法</title>
</head>
<body>
<script type="text/javascript">
/*
slice方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置
substring方法：第一个参数指定子字符串开始位置，第二个参数表示子字符串最后一个字符后面的位置
substr方法：第一个参数指定子字符串开始位置，第二个参数表示返回的字符个数
这三个方法都会返回被操作字符串的一个子字符串，都接收一或两个参数
如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。这些方法也不会修改字符串本身，只是返回一个基本类型的字符串值
*/
var str="hello world";
console.log(str.slice(3));//lo world
console.log(str.substring(3));//lo world
console.log(str.substr(3));//lo world
console.log(str.slice(3,7));//lo w 7表示子字符串最后一个字符后面的位置 简单理解就是包含头不包含尾
console.log(str.substring(3,7));//lo w
console.log(str.substr(3,7));//lo worl 7表示返回7个字符
console.log(str.slice(3,-4));//lo w -4+11=7表示子字符串最后一个字符后面的位置 简单理解就是包含头不包含尾
console.log(str.substring(3,-4));//hel 会转换为console.log(str.substring(3,0));
//此外由于这个方法会将较小数作为开始位置，较大数作为结束位置，所以相当于调用console.log(str.substring(0,3));
console.log(str.substr(3,-4));//""空字符串
console.log(str.substring(3,0));
</script>
</body>
</html>
4.字符串位置方法
- str.indexOf(searchString,startIndex); 返回子字符串第一次出现的位置，从startIndex开始查找，找不到时返回-1
- str.lastIndexOf(searchString,startIndex); 从由往左找子字符串，找不到时返回-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串位置方法</title>
</head>
<body>
<script type="text/javascript">
/*
indexOf方法和lastIndexOf方法都是从一个字符串中搜索给定的子字符串，然后返回子字符串的位置，如果没有找到，则返回-1
indexOf方法是从字符串的开头向后搜索子字符串，lastIndexOf方法正好相反
这两个方法都可以接收两个参数：要查找的子字符串和查找的位置
*/
var str="hello world";
console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//7
console.log(str.indexOf("o",6));//7
console.log(str.lastIndexOf("o",6));//4
</script>
</body>
</html>
由于以上两个方法只能返回1次，当需要将一段字符串里的所有searchString出现的位置都查找出来时，这样做：
var str = "........"; var s = "啊"; var i = 0; for( ; str.indexOf(s,i) != -1 ; ) { console.log(str.indexOf(s,i)); i = str.indexOf(s,i) + s.length; }
5.trim方法
str.trim() 用来删除字符串前后的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>trim方法</title>
</head>
<body>
<script type="text/javascript">
/*
trim方法用来删除字符串前后的空格
*/
var str=" hello world ";
console.log('('+str.trim()+')');//(hello world)
console.log('('+str+')');//( hello world )
</script>
</body>
</html>
6.字符串大小写转换方法
str.toLowerCase() 小
str.toUpperCase() 大
7.字符串分割成数组
str.split(separator,limit); 参数1指定字符串或正则，参照2指定数组的最大长度
例：str.split(""); 每个字符都被分割 ['','','','']
str.split(); 整个字符串放到数组里 ['']
【引申】：数组变成字符串
arr.join(分隔符) 以,连接
arr.join('') 无缝连接
arr.join('-') 以-连接
arr.join('<span>' + str + '</span>') 以表达式连接
<script type="text/javascript"> /* split方法是基于指定的字符，将字符串分割成字符串数组 当指定的字符为空字符串时，将会分隔整个字符串 */ var str="red,blue,green,yellow"; console.log(str.split(","));//["red", "blue", "green", "yellow"] console.log(str.split(",",2));//["red", "blue"] 第二个参数用来限制数组大小 console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""] //第一项和最后一项为空字符串是因为正则表达式指定的分隔符出现在了子字符串的开头，即"red"和"yellow" //[^...] 不在方括号内的任意字符 只要不是逗号都是分隔符 </script>
8.localeCompare方法
这个方法用于比较两个字符串
1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数
2.如果字符串等于字符串参数，则返回0
3.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数
<script type="text/javascript">
/*
这个方法用于比较两个字符串
1.如果字符串在字母表中应该排在字符串参数之前，则返回一个负数
1.如果字符串等于字符串参数，则返回0
1.如果字符串在字母表中应该排在字符串参数之后，则返回一个正数
*/
var str="yellow";
console.log(str.localeCompare("brick"));//1
console.log(str.localeCompare("yellow"));//0
console.log(str.localeCompare("zoo"));//-1
</script>
9.fromCharCode方法
1fromCharCode方法是接收一或多个字符编码，然后将其转换为字符串
2.fromCharCode方法是String构造函数的一个静态方法
<script type="text/javascript">
/*
fromCharCode方法是接收一或多个字符编码，然后将其转换为字符串
fromCharCode方法是String构造函数的一个静态方法
*/
console.log(String.fromCharCode(104,101,108,108,111));//hello
</script>
10.字符串之间的比较
字符串之间的比较：比较第一个字符的unicode编码值，第一个字符要是相同，就比较第二个，依次往下
'10000' < '2' 1的unicode值比2的unicode值小 true
'10000' > 2 转成数字比较 true
二、高级方法
1.字符串正则匹配
str.match(rgExp) 正则匹配 （ex6新增）
str.search(/at/)（ex6新增）
<script type="text/javascript"> /* match方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式 search方法：只接受一个参数，由字符串或RegExp对象指定的一个正则表达式 search方法返回字符串中第一个匹配项的索引，如果没有匹配项，返回-1 */ var str="cat,bat,sat,fat"; var pattern=/.at/; var matches=str.match(pattern); console.log(matches.index);//0 console.log(matches[0]);//cat console.log(pattern.lastIndex);//0 //lastIndex表示开始搜索下一个匹配项的字符位置，从0算起 var pos=str.search(/at/); console.log(pos);//1 1表示at字符串在原来字符串中第一次出现的位置 </script>
2.replace替换方法
str.replace(rgExp/substr,replaceText) 返回替换后的字符串
<script type="text/javascript">
var str="cat,bat,sat,fat";
var res=str.replace("at","one");//第一个参数是字符串，所以只会替换第一个子字符串
console.log(res);//cone,bat,sat,fat
var res1=str.replace(/at/g,"one");//第一个参数是正则表达式，所以会替换所有的子字符串
console.log(res1);//cone,bone,sone,fone
</script>
三、方法总结
1.找到匹配字符串所在的各个位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串匹配</title>
</head>
<body>
<script type="text/javascript">
/*找到匹配字符串所在的各个位置*/
var str="asadajhjkadaaasdasdasdasd";
var position=[];
var pos=str.indexOf("d");
while(pos>-1){
position.push(pos);
pos=str.indexOf("d",pos+1);
}
console.log(position);//[3, 10, 15, 18, 21, 24]
</script>
</body>
</html>
2.字符串去重（方法很多，自己感觉正则最简单）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串去重</title>
</head>
<body>
<script type="text/javascript">
//String.split() 执行的操作与 Array.join 执行的操作是相反的
//split() 方法用于把一个字符串分割成字符串数组。
//join方法用于将字符串数组连接成一个字符串
//如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
var str="aahhgggsssjjj";//这里字符串没有可以分隔的字符，所以需要使用空字符串作为分隔符
function unique(msg){
var res=[];
var arr=msg.split("");
//console.log(arr);
for(var i=0;i<arr.length;i++){
if(res.indexOf(arr[i])==-1){
res.push(arr[i]);
}
}
return res.join("");
}
console.log(unique(str));//ahgsj
</script>
</body>
</html>
3.判断字符串中字符出现的次数
<script type="text/javascript"> /* 1.先实现字符串去重 2.然后对去重后的数组用for循环操作，分别与原始数组中各个值进行比较，如果相等则count++,循环结束将count保存在sum数组中，然后将count重置为0 3.这样一来去重后的数组中的元素在原数组中出现的次数与sum数组中的元素是一一对应的 */ var str="aacccbbeeeddd"; var sum=[]; var res=[]; var count=0; var arr=str.split(""); for(var i=0;i<arr.length;i++){ if(res.indexOf(arr[i])==-1){ res.push(arr[i]); } } for(var i=0;i<res.length;i++){ for(var j=0;j<arr.length;j++){ if(arr[j]==res[i]){ count++; } } sum.push(count); count=0; } console.log(res);//["a", "c", "b", "e", "d"] for(var i=0;i<res.length;i++){ var str=(sum[i]%2==0)?"偶数":"奇数"; console.log(res[i]+"出现了"+sum[i]+"次"); console.log(res[i]+"出现了"+str+"次"); } </script>
4.阿里面试-字符串操作
<script type="text/javascript"> var str = "www.taobao.com"; var res = str.split("").reverse().join("").replace('oat',''); console.log(res);//moc.oab.www </script>
