js字符串操作總結(jié)(必看篇)
更新時間：2016年11月22日 09:07:13 投稿：jingxian
下面小編就為大家?guī)硪黄猨s字符串操作總結(jié)(必看篇)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦
字符方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符方法</title>
</head>
<body>
<script type="text/javascript">
/*
charAt方法和charCodeAt方法都接收一個參數(shù)，基于0的字符位置
charAt方法是以單字符字符串的形式返回給定位置的那個字符
charCodeAt方法獲取到的不是字符而是字符編碼
*/
var str="hello world";
console.log(str.charAt(1));//e
console.log(str.charCodeAt(1));//101
//還可以使用方括號加數(shù)字索引來訪問字符串中特定的字符
console.log(str[1]);//e
</script>
</body>
</html>
字符串操作方法
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方法可以接收任意多個參數(shù)
//雖然concat方法是專門用來拼接字符串的，但是實踐中我們使用最多的還是加操作符+，因為其簡易便行
</script>
</body>
</html>
slice方法、substring方法、substr方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串操作方法</title>
</head>
<body>
<script type="text/javascript">
/*
slice方法：第一個參數(shù)指定子字符串開始位置，第二個參數(shù)表示子字符串最后一個字符后面的位置
substring方法：第一個參數(shù)指定子字符串開始位置，第二個參數(shù)表示子字符串最后一個字符后面的位置
substr方法：第一個參數(shù)指定子字符串開始位置，第二個參數(shù)表示返回的字符個數(shù)
這三個方法都會返回被操作字符串的一個子字符串，都接收一或兩個參數(shù)
如果沒有給這些方法傳遞第二個參數(shù)，則將字符串的長度作為結(jié)束位置。這些方法也不會修改字符串本身，只是返回一個基本類型的字符串值
*/
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 會轉(zhuǎn)換為console.log(str.substring(3,0));
//此外由于這個方法會將較小數(shù)作為開始位置，較大數(shù)作為結(jié)束位置，所以相當于調(diào)用console.log(str.substring(0,3));
console.log(str.substr(3,-4));//""空字符串
console.log(str.substring(3,0));
</script>
</body>
</html>
字符串位置方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串位置方法</title>
</head>
<body>
<script type="text/javascript">
/*
indexOf方法和lastIndexOf方法都是從一個字符串中搜索給定的子字符串，然后返回子字符串的位置，如果沒有找到，則返回-1
indexOf方法是從字符串的開頭向后搜索子字符串，lastIndexOf方法正好相反
這兩個方法都可以接收兩個參數(shù)：要查找的子字符串和查找的位置
*/
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>
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>
字符串大小寫轉(zhuǎn)換方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>大小寫轉(zhuǎn)換</title>
</head>
<body>
<script type="text/javascript">
var str="HELLO world";
console.log(str.toLowerCase());//hello world
console.log(str.toUpperCase());//HELLO WORLD
</script>
</body>
</html>
字符串模式匹配方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串模式匹配</title>
</head>
<body>
<script type="text/javascript">
/*
match方法：只接受一個參數(shù)，由字符串或RegExp對象指定的一個正則表達式
search方法：只接受一個參數(shù)，由字符串或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字符串在原來字符串中第一次出現(xiàn)的位置
</script>
</body>
</html>
replace方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replace方法</title>
</head>
<body>
<script type="text/javascript">
var str="cat,bat,sat,fat";
var res=str.replace("at","one");//第一個參數(shù)是字符串，所以只會替換第一個子字符串
console.log(res);//cone,bat,sat,fat
var res1=str.replace(/at/g,"one");//第一個參數(shù)是正則表達式，所以會替換所有的子字符串
console.log(res1);//cone,bone,sone,fone
</script>
</body>
</html>
split方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>split方法</title>
</head>
<body>
<script type="text/javascript">
/*
split方法是基于指定的字符，將字符串分割成字符串數(shù)組
當指定的字符為空字符串時，將會分隔整個字符串
*/
var str="red,blue,green,yellow";
console.log(str.split(","));//["red", "blue", "green", "yellow"]
console.log(str.split(",",2));//["red", "blue"] 第二個參數(shù)用來限制數(shù)組大小
console.log(str.split(/[^\,]+/));// ["", ",", ",", ",", ""]
//第一項和最后一項為空字符串是因為正則表達式指定的分隔符出現(xiàn)在了子字符串的開頭，即"red"和"yellow"
//[^...] 不在方括號內(nèi)的任意字符 只要不是逗號都是分隔符
</script>
</body>
</html>
localeCompare方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>localeCompare方法</title>
</head>
<body>
<script type="text/javascript">
/*
這個方法用于比較兩個字符串
1.如果字符串在字母表中應該排在字符串參數(shù)之前，則返回一個負數(shù)
1.如果字符串等于字符串參數(shù)，則返回0
1.如果字符串在字母表中應該排在字符串參數(shù)之后，則返回一個正數(shù)
*/
var str="yellow";
console.log(str.localeCompare("brick"));//1
console.log(str.localeCompare("yellow"));//0
console.log(str.localeCompare("zoo"));//-1
</script>
</body>
</html>
fromCharCode方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fromCharCode方法</title>
</head>
<body>
<script type="text/javascript">
/*
fromCharCode方法是接收一或多個字符編碼，然后將其轉(zhuǎn)換為字符串
fromCharCode方法是String構(gòu)造函數(shù)的一個靜態(tài)方法
*/
console.log(String.fromCharCode(104,101,108,108,111));//hello
</script>
</body>
</html>
找到匹配字符串所在的各個位置
<!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>
字符串去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串去重</title>
</head>
<body>
<script type="text/javascript">
//String.split() 執(zhí)行的操作與 Array.join 執(zhí)行的操作是相反的
//split() 方法用于把一個字符串分割成字符串數(shù)組。
//join方法用于將字符串數(shù)組連接成一個字符串
//如果把空字符串 ("") 用作 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>
判斷字符串中字符出現(xiàn)的次數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>字符串操作</title>
</head>
<body>
<script type="text/javascript">
/*
1.先實現(xiàn)字符串去重
2.然后對去重后的數(shù)組用for循環(huán)操作，分別與原始數(shù)組中各個值進行比較，如果相等則count++,循環(huán)結(jié)束將count保存在sum數(shù)組中，然后將count重置為0
3.這樣一來去重后的數(shù)組中的元素在原數(shù)組中出現(xiàn)的次數(shù)與sum數(shù)組中的元素是一一對應的
*/
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)?"偶數(shù)":"奇數(shù)";
console.log(res[i]+"出現(xiàn)了"+sum[i]+"次");
console.log(res[i]+"出現(xiàn)了"+str+"次");
}
</script>
</body>
</html>
阿里面試-字符串操作
<script type="text/javascript">
var str = "www.taobao.com";
var res = str.split("").reverse().join("").replace('oat','');
console.log(res);//moc.oab.www
</script>
以上就是小編為大家?guī)淼膉s字符串操作總結(jié)(必看篇)全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
本文主要介紹了JavaScript數(shù)組迭代方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03![[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解](http://img.jbzj.com/images/xgimg/bcimg1.png)
[js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解
下面小編就為大家?guī)硪黄猍js高手之路]從原型鏈開始圖解繼承到組合繼承的產(chǎn)生詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Bootstrap 警告框（Alert）插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
下面小編就為大家?guī)硪黄猨avascript漢字拼音互轉(zhuǎn)的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
這篇文章主要介紹了JS實現(xiàn)基于拖拽改變物體大小的方法,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-01-01
JavaScript實現(xiàn)動態(tài)刪除列表框值的方法
這篇文章主要介紹了JavaScript實現(xiàn)動態(tài)刪除列表框值的方法,涉及javascript針對select列表框的遍歷與刪除操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了小程序二次貝塞爾曲線實現(xiàn)購物車商品曲線飛入效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章是JavaScript插件化開發(fā)系列教程的第五篇，還是著重于實戰(zhàn)，通過具體的實例來學習jQuery的方式如何開發(fā)插件，有相同需求的小伙伴來參考下吧。2015-02-02
小程序?qū)崿F(xiàn)輪播每次顯示三條數(shù)據(jù)
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)輪播每次顯示三條數(shù)據(jù)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript 匿名函數(shù)（anonymous function）與閉包（closure）
JavaScript 匿名函數(shù)（anonymous function）與閉包（closure） ,學習js的朋友可以參考下。2011-10-10