@(javascript)[js字符串]
[toc]
JavaScript中的字符串
字符串是JavaScript中7種數(shù)據(jù)中的一種,用于表示由零個或多個16位的Unicode字符組成的字符序列。創(chuàng)建字符串有兩種方式,一種是字面量,另一種是構(gòu)造函數(shù)。
- 字面量
var str = "一個字符串";
- 構(gòu)造函數(shù)
var str = new String("一個字符串");
上面就是兩個字符串,但是字面量對構(gòu)造函數(shù)說:“我們不一樣?!?/code>那有啥不一樣?好。下面來看看具體的。
var str1 = "一個字符串";
console.log(str1); // 一個字符串
console.log(typeof str1); // string
var str2 = new String("一個字符串");
console.log(str2); // String {"一個字符串"}
console.log(typeof str2); // object
可以看出來兩個的值與類型都不相同。使用字面量就是返回一個字符串。使用構(gòu)造函數(shù)則是一個字符串對象。如果要將字符串對象轉(zhuǎn)換為字符串??梢允褂?code>toString,toLocalSring,valueOf轉(zhuǎn)換為字符串。
var str2 = new String("一個字符串");
console.log(str2); // String {"一個字符串"}
console.log(typeof str2); // object
console.log(str2.toString()) // 一個字符串
console.log(str2.toLocaleString()) // 一個字符串
console.log(str2.valueOf()) // 一個字符串
這樣要使用一個字符串費(fèi)勁。所以一般看不到這樣的操作,都是使用的字面量定義。下面的關(guān)于字符串的一些方法都將使用字面量的形式。
字符串是有長度的
字符串是有長度這個屬性的。從剛剛的構(gòu)造函數(shù)中可以看出來。獲取長度使用length屬性就不在過多的說明。
字符方法
字符串用于兩個訪問特定字符的方法:
charAt:一個參數(shù),返回給定位置的字符
charCodeAt:一個參數(shù),返回給定位置的字符的字符編碼
以及一個將字符編碼轉(zhuǎn)換為字符的方法,這個是String構(gòu)造函數(shù)的
fromCharCode
var str = "測試字符方法";
console.log(str.charAt(2)); // 字
console.log(str.charCodeAt(2)); // 23383
console.log(String.fromCharCode(23383)) // 字
// charAt()方法獲取指定位置的字符還可以直接使用下標(biāo)獲取,因?yàn)樽址怯虚L度的。
console.log(str[2]); // 字
雖說可以使用下標(biāo)獲取指定位置的字符。但是此方法不兼容IE8以下。所以如果使用需要謹(jǐn)慎。
字符操作方法
concat() - 拼接字符串
concat方法用于講一個或者多個字符串拼接起來。所以他接收一個或者多個字符創(chuàng)作為參數(shù)。
var str = "我";
var res = str.concat("喜","歡","你","!");
console.log(str); // 我
console.log(res); // 我喜歡你!
經(jīng)過上面的代碼發(fā)現(xiàn),使用concat是不會影響原字符串的。這個方法在數(shù)組中也存在,不過那是連接數(shù)組了。
雖說可以使用concat方法連接兩個或者兩個以上的字符串,但是基本不使用。開發(fā)中還是使用+號拼接的使用更多。
substr(),substring(),slice() - 切割字符串
三個方法都是基于字符串創(chuàng)建新字符的方法,都接收一個或者兩個參數(shù),返回一個新字符串,不影響原字符串。第一個參數(shù)是切割的開始位置(包括這個位置)。
substr:第二個參數(shù)指切割的字符串的個數(shù),因?yàn)槭莻€數(shù)。所以包含最后一個
substring:第二個參數(shù)指切割的字符串的位置,不包含最后一個
slice:第二個參數(shù)指切割的字符串的位置,不包含最后一個
三個若都沒有第二個參數(shù)。默認(rèn)都字符串末尾
var str = "我喜歡你一生一世!";
// 傳遞的參數(shù)是一個正數(shù)
console.log(str.substr(2)); // 歡你一生一世!
console.log(str.substring(2)); // 歡你一生一世!
console.log(str.slice(2)); // 歡你一生一世!
console.log(str.substr(2,3)); // 歡你一
console.log(str.substring(2,3)); // 歡
console.log(str.slice(2,3)); // 歡
// 傳遞的參數(shù)是一個負(fù)數(shù)
console.log(str.substr(-3)); // 一世!
console.log(str.substring(-3)); // 我喜歡你一生一世!
console.log(str.slice(-3)); // 一世!
console.log(str.substr(3,-4)); // 空字符串
console.log(str.substring(3,-4)); // 我喜歡
console.log(str.slice(3,-4)); // 你一
對比上面的代碼。當(dāng)兩個參數(shù)都是正數(shù)的時候很簡單。但是當(dāng)兩個都是負(fù)數(shù)的時候,問題就來了。substr會將負(fù)的第一個參數(shù)從后往前數(shù)第幾位作為開始位置。負(fù)的第二個參數(shù)轉(zhuǎn)化為0。slice會將負(fù)數(shù)全部從后往前數(shù)。但是substring像是沒事人一樣。把負(fù)數(shù)忽略了。轉(zhuǎn)化為0,同時以較小數(shù)作為開始位置。
字符串位置方法 - 查找字符串
indexOf:從頭到尾的找
lastIndexOf:從尾到頭的找
兩個方法都接收一個或者兩個參數(shù),第一個是需要查找的字符,第二個是從哪個位置開始查找(下標(biāo),默認(rèn)是0)。
var str = "我是真的真的喜歡你!";
// 0 1 23 4 56 7 8
console.log(str.indexOf("真")); // 2
console.log(str.lastIndexOf("真")); // 4
console.log(str.indexOf("真",3)); // 4
console.log(str.lastIndexOf("真",3)); // 2
console.log(str.indexOf("他")); // -1
console.log(str.lastIndexOf("他")); // -1
可以看的,不管是indexOf還是lastIndexOf找到字符串后都會返回這個字符的下標(biāo)。不過一個是正著數(shù)一個是倒著數(shù)。但是當(dāng)去尋找小三他的時候沒有發(fā)現(xiàn)小三舊放回一個-1。
所以,兩個方法都是找到返回下標(biāo)(注意從哪頭開始的)。未找到返回 -1。
trim()方法
trim()方法很簡單,就是取出字符串的收尾的空格。但是此方法不兼容IE8及以下。
var str = " 我喜歡你! ";
console.log(str); // 我喜歡你!
console.log(str.trim()); // 我喜歡你!
如果是要兼容IE8及以下,可是使用正則去替換。
var str = " 我喜歡你! ";
var res = str.replace(/^\s*|\s*$/g,"");
console.log(res); // 我喜歡你!
var str = " 我喜 歡你! ";
var res = str.replace(/^\s*|\s*$/g,"");
console.log(res); // 我喜 歡你!
大小寫轉(zhuǎn)化方法
四個方法:
toLowerCase:轉(zhuǎn)換為小寫
toLocaleLowerCase:轉(zhuǎn)換為當(dāng)?shù)貢r區(qū)小寫,一些地方專用
toUpperCase:轉(zhuǎn)換為大寫
toLocaleUpperCase:轉(zhuǎn)換為當(dāng)?shù)貢r區(qū)大寫,一些地方專用
var str = "I Love You!";
console.log(str.toLowerCase()); // i love you!
console.log(str.toLocaleLowerCase()); // i love you!
console.log(str.toUpperCase()); // I LOVE YOU!
console.log(str.toLocaleUpperCase()); // I LOVE YOU!
為了保險起見,使用帶Locale的更好。
字符串匹配方法
match() - 匹配
match本質(zhì)上與RegExp的exec()方法是一樣的。接收一個參數(shù),正則表達(dá)式或者是RegExp對象。返回一個數(shù)組。
var str = "bat,cat,fat,hat";
var reg = /.at/g;
var res = str.match(reg);
console.log(res) // (4) ["bat", "cat", "fat", "hat"]
var res = str.match(reg);與var res = reg.exec(str);本質(zhì)上相同。但是后面的無論是不是全局都是返回長度為1的數(shù)組。如果不是全局匹配,兩者沒有區(qū)別。
search() - 搜索
search的參數(shù)與match一樣。search方法返回字符串中第一個匹配項(xiàng)的索引。沒有則返回-1。
var str = "bat,cat,fat,hat";
var reg = /at/;
var res = str.search(reg);
console.log(res); // 1。因?yàn)榈谝粋€ a 的下標(biāo)為 1
replace() - 替換
replace方法是字符串中十分重要的一個方法,必須掌握。接收兩個參數(shù)。
第一個參數(shù):可以是一個字符串或者是一個正則
第二個參數(shù):可以是一個字符串或者是一個函數(shù)
第二個參數(shù)是字符串:
var str = "abcdcba";
var res1 = str.replace("b","逼");
console.log(res1); // a逼cdcba
var res2 = str.replace(/b/g,"逼");
console.log(res2); // a逼cdc逼a
第一個參數(shù)為字符串基本不用,因?yàn)樗荒芷ヅ涞谝粋€,且只能匹配一個
第二個參數(shù)是函數(shù):
如果是函數(shù)
第一個參數(shù):匹配項(xiàng)
中間的參數(shù):捕獲組1,捕獲組2,捕獲組3······
倒數(shù)第二個:位置
最后一個:原始字符串
var str = "fathermatherbrothersister";
var reg = /father(mather(brother(sister)))/;
var res = str.replace(reg,function(match,capture1,capture2,capture3,pos,originalText){
console.log(match); // fathermatherbrothersister
console.log(capture1); // matherbrothersister
console.log(capture2); // brothersister
console.log(capture3); // sister
console.log(pos); // 0
console.log(originalText); // fathermatherbrothersister
})
console.log(res); // undefined 。因?yàn)榈诙€參數(shù)無返回值
第二個參數(shù)既然可以拿到這些東西。那我們就可以做任何事情。
split() - 分割
split方法可以將字符串按指定的符號進(jìn)行分割,返回一個數(shù)組。
第一個參數(shù):分隔符。字符串或者正則
第二個參數(shù):可選。返回數(shù)字的長度,不能大于可切割的長度
var color = "yellow,red,green,blue";
console.log(color.split(",")); // (4) ["yellow", "red", "green", "blue"]
console.log(color.split(",",2)); //(2) ["yellow", "red"]
console.log(color.split(/[^,]+/)); (5) ["", ",", ",", ",", ""] 。[^,]除了 , 以外