JavaScript中的字符串

@(javascript)[js字符串] [toc]

JavaScript中的字符串

字符串是JavaScript中7種數據中的一種，用於表示由零個或多個16位的Unicode字符組成的字符序列。建立字符串有兩種方式，一種是字面量，另外一種是構造函數。

1. 字面量

var str = "一個字符串";
複製代碼

2. 構造函數

var str = new String("一個字符串");
複製代碼

上面就是兩個字符串，可是字面量對構造函數說：「咱們不同。」那有啥不同？好。下面來看看具體的。

var str1 = "一個字符串";
console.log(str1);	// 一個字符串
console.log(typeof str1);	// string
var str2 = new String("一個字符串");
console.log(str2);	// String {"一個字符串"}
console.log(typeof str2);	// object
複製代碼

能夠看出來兩個的值與類型都不相同。使用字面量就是返回一個字符串。使用構造函數則是一個字符串對象。若是要將字符串對象轉換爲字符串。能夠使用toString，toLocalSring，valueOf轉換爲字符串。

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())	// 一個字符串
複製代碼

這樣要使用一個字符串費勁。因此通常看不到這樣的操做，都是使用的字面量定義。下面的關於字符串的一些方法都將使用字面量的形式。

字符串是有長度的

字符串是有長度這個屬性的。從剛剛的構造函數中能夠看出來。獲取長度使用length屬性就不在過多的說明。

字符方法

字符串用於兩個訪問特定字符的方法： charAt：一個參數，返回給定位置的字符 charCodeAt：一個參數，返回給定位置的字符的字符編碼 以及一個將字符編碼轉換爲字符的方法，這個是String構造函數的 fromCharCode

var str = "測試字符方法";
console.log(str.charAt(2));	// 字
console.log(str.charCodeAt(2));	// 23383

console.log(String.fromCharCode(23383)) // 字

// charAt()方法獲取指定位置的字符還能夠直接使用下標獲取，由於字符串是有長度的。
console.log(str[2]);	// 字
複製代碼

雖然說能夠使用下標獲取指定位置的字符。可是此方法不兼容IE8如下。因此若是使用須要謹慎。

字符操做方法

concat() - 拼接字符串

concat方法用於講一個或者多個字符串拼接起來。因此他接收一個或者多個字符創做爲參數。

var str = "我";
var res = str.concat("喜","歡","你","！");
console.log(str);	// 我
console.log(res);	// 我喜歡你！
複製代碼

通過上面的代碼發現，使用concat是不會影響原字符串的。這個方法在數組中也存在，不過那是鏈接數組了。 雖然說能夠使用concat方法鏈接兩個或者兩個以上的字符串，可是基本不使用。開發中仍是使用+號拼接的使用更多。

substr()，substring()，slice() - 切割字符串

三個方法都是基於字符串建立新字符的方法，都接收一個或者兩個參數，返回一個新字符串，不影響原字符串。第一個參數是切割的開始位置（包括這個位置）。

substr：第二個參數指切割的字符串的個數，由於是個數。因此包含最後一個 substring：第二個參數指切割的字符串的位置，不包含最後一個 slice：第二個參數指切割的字符串的位置，不包含最後一個 三個若都沒有第二個參數。默認都字符串末尾

var str = "我喜歡你一輩子一世！";
// 傳遞的參數是一個正數
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));	// 歡

// 傳遞的參數是一個負數
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));	// 你一
複製代碼

對比上面的代碼。當兩個參數都是正數的時候很簡單。可是當兩個都是負數的時候，問題就來了。substr會將負的第一個參數從後往前數第幾位做爲開始位置。負的第二個參數轉化爲0。slice會將負數所有從後往前數。可是substring像是沒事人同樣。把負數忽略了。轉化爲0，同時以較小數做爲開始位置。

字符串位置方法 - 查找字符串

indexOf：從頭至尾的找 lastIndexOf：從尾到頭的找 兩個方法都接收一個或者兩個參數，第一個是須要查找的字符，第二個是從哪一個位置開始查找（下標，默認是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找到字符串後都會返回這個字符的下標。不過一個是正着數一個是倒着數。可是當去尋找小三他的時候沒有發現小三舊放回一個-1。

因此，兩個方法都是找到返回下標(注意從哪頭開始的)。未找到返回 -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);	// 我喜 歡你！
複製代碼

大小寫轉化方法

四個方法： toLowerCase：轉換爲小寫 toLocaleLowerCase：轉換爲當地時區小寫，一些地方專用 toUpperCase：轉換爲大寫 toLocaleUpperCase：轉換爲當地時區大寫，一些地方專用

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本質上與RegExp的exec()方法是同樣的。接收一個參數，正則表達式或者是RegExp對象。返回一個數組。

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);本質上相同。可是後面的不管是否是全局都是返回長度爲1的數組。若是不是全局匹配，二者沒有區別。

search() - 搜索

search的參數與match同樣。search方法返回字符串中第一個匹配項的索引。沒有則返回-1。

var str = "bat,cat,fat,hat";
var reg = /at/;
var res = str.search(reg);
console.log(res); // 1。由於第一個 a 的下標爲 1
複製代碼

replace() - 替換

replace方法是字符串中十分重要的一個方法，必須掌握。接收兩個參數。

第一個參數：能夠是一個字符串或者是一個正則 第二個參數：能夠是一個字符串或者是一個函數

第二個參數是字符串：

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
複製代碼

第一個參數爲字符串基本不用，由於他只能匹配第一個，且只能匹配一個

第二個參數是函數： 若是是函數 第一個參數：匹配項 中間的參數：捕獲組1，捕獲組2，捕獲組3······ 倒數第二個：位置 最後一個：原始字符串

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 。由於第二個參數無返回值
複製代碼

第二個參數既然能夠拿到這些東西。那咱們就能夠作任何事情。

split() - 分割

split方法能夠將字符串按指定的符號進行分割，返回一個數組。 第一個參數：分隔符。字符串或者正則 第二個參數：可選。返回數字的長度，不能大於可切割的長度

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) ["", ",", ",", ",", ""] 。[^,]除了 , 之外
複製代碼