從頭開始複習js之這多是最全的字符串用法

前面一章主要複習了數組的全部方法，今天咱們開始來研究一下字符串的方法吧。

1、 es5的字符串方法

1.一、 字符串新建

• new方法新建
• toString方法轉化
• 數組的join
• 字面量定義
• length：字符串的長度

關於字符串新建這相對比較簡單，我就界面上面幾種方式，固然還有不少方式啊。推薦使用數組字面量的方式來新建字符串。

var str = "hello world";

var str = new String("wo shi klivitam");

var str = ["wo","shi","shui"].toString();

var str = ["wo","shi","shui"].join("");

console.log(str.length) // 9
複製代碼

1.二、 字符串與char

• charAt:將 this 對象轉換爲一個字符串，返回包含了這個字符串 pos 位置的字符的字符串。若是那個位置沒有字符，返回空字符串。返回結果是個字符串值，不是字符串對象。
• charCodeAt:將 this 對象轉換爲一個字符串，返回一個表明這個字符串 pos 位置字符的代碼單元值的數字（小於 216 的非負整數）。若是那個位置沒有字符，返回 NaN。
• fromCharCode: 返回一個字符串值，包含的字符數與參數數目相同。每一個參數指定返回字符串中的一個字符，也就是說第一個參數第一個字符，以此類推（從左到右）

關於這個，其實也有不少的做用，來看下面一段代碼：

var str = "hello world";

for(var i=0;i<str.length;i++){
	console.log("charAt:",str.charAt(i),",charCodeAt:",str.charCodeAt(i));
}
// charAt: h ,charCodeAt: 104
// charAt: e ,charCodeAt: 101
// charAt: l ,charCodeAt: 108
// charAt: l ,charCodeAt: 108
// charAt: o ,charCodeAt: 111
// charAt:   ,charCodeAt: 32
// charAt: w ,charCodeAt: 119
// charAt: o ,charCodeAt: 111
// charAt: r ,charCodeAt: 114
// charAt: l ,charCodeAt: 108
// charAt: d ,charCodeAt: 100

複製代碼

上面咱們能夠查詢到，char的unicode值，此時咱們再用這些unicode的值利用fromCharCode來建立String，以下面代碼所示：

var str = String.fromCharCode(104,101,108,108,111);
console.log(str); // hello
複製代碼

1.三、 字符串查找

• indexOf： 在給點字符串呢查找出現第一個子串的位置，若是找不到返回-1
• lastIndexOf:在給點字符串呢查找最後一個出現子串的位置，若是找不到返回-1
• search：意思跟indexOf相似，惟一有差距的是 傳參是正則表達式
• match：該方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。返回值是查找到的數組哦。 關於這個方法的使用以下所示：

關於字符串的查找就相對比較簡單了，來看下面一段代碼：

var str = "hello world";

console.log(str.indexOf("l")); // 2
console.log(str.lastIndexOf("l")); // 9
console.log(str.search(/l/)); // 2

console.log(str.indexOf("k")); // -1
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g); // [ 'ain', 'ain', 'ain' ]
複製代碼

關於正則表達式這一塊，我今晚在這篇文章寫完以後 另開出一章來寫

1.四、 字符串大小寫轉換

• toLowerCase/toLocaleLowerCase：將字符串中的大寫轉化成等價的小寫
• toUpperCase/toLocaleUpperCase：將字符串中的小寫轉化成等價的大寫

大小寫轉換的一個方法，/後面的方法和前面的方法 大同小異，我上網查詢了一下，可能在土耳其啥的語言上有點不同。具體的效果看下面一段代碼

var str = "hello WORLD";
console.log(str.toUpperCase()) // HELLO WORLD

console.log(str.toLowerCase()) // hello world
複製代碼

1.五、 字符串截取與拼接

• concat：字符串的拼接

var str = "hello";
var srr1 ="world";

var str2 = str.concat(" ","world");
console.log(str2); // hello world
複製代碼

如上所示，該方法接收n個字符串，會將全部字符串組合成一個新的字符串。

• replace：將字符串中的字串替換成給定的字串。

var str = "hello world";
var str1 = str.replace("l","L");
console.log(str1) // heLlo world
console.log(str) //  hello world
複製代碼

這裏值得咱們注意的是：replace只能替換第一個字符串的位置，作Android的都是知道，Android裏面有一個replaceAll方法，可是js沒有實現，js應該如何實現呢？

var str = "hello world";
var str1 = str.replace(/l/g,"L");
console.log(str1) // heLLo worLd
console.log(str) //  hello world
複製代碼

從上面代碼咱們能夠知道，replace第一個參數實際上是正則表達式，關於正則，跟前面同樣 我今晚會寫一篇文章來複習這個內容，這裏就再也不講解了。

• slice：slice ，返回這個字符串中從 start 位置的字符到（但不包含）end 位置的字符的一個子字符串（或若是 end 是 undefined，就直接到字符串尾部）

var str = "hello world";

console.log(str.slice(0,5)); // hello
console.log(str.slice(-5)); // world
console.log(str.slice(0,100)); // hello world
複製代碼

這裏值得咱們注意的點是： 一、 該方法須要兩個參數 start 和 end 二、 若是end大於字符串的長度，end默認爲字符串的長度 三、 若是存在負數，則代碼字符串長度加上負數爲該參數

• split：該方法用於把一個字符串分割成字符串數組

var str = "hello world";

var arr1 = str.split(""); // [ 'h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd' ]
var arr2 = str.split("o");// [ 'hell', ' w', 'rld' ]
var arr3 = str.split("",3) // [ 'h', 'e', 'l' ]
複製代碼

這裏值得注意的是：aplit接收兩個參數，第一個參數是表示從該參數指定的地方開始分割，第二個參數是指定返回數組的長度。

• substring：該方法用於截取字符串的給定字串

var str = "hello world";

console.log(str.substring(0,5)); // hello
console.log(str.substring(0,1000)); // hello world
複製代碼

主力值得注意的是：substring 方法須要兩個參數 start 和 end，，返回包含在轉換結果字符串中從 start 位置字符一直到（但不包括）end 位置的字符（或若是 end 是 undefined，就到字符串末尾的一個子串。

• trim： 該方法去除字符串開頭和結尾的空格

var str1 =  " hello world 1 ";
var str2 = str1.trim()
console.log(str2); // hello world     1
console.log(str1); //      hello world     1 
複製代碼

值得注意的是，該方法只能去除開頭和結尾的空格，不能去除全部的空格哦。

2、 es5後的字符串方法

2.一、 字符串的查找

• includes： 返回布爾值，表示是否找到了參數字符串。
• startsWith：返回布爾值，表示參數字符串是否在原字符串的頭部。
• endsWith：返回布爾值，表示參數字符串是否在原字符串的尾部。

let str = 'Hello world!';

str.startsWith('Hello') // true
str.endsWith('!') // true
str.includes('o') // true
str.startsWith('world', 6) // true
str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false
複製代碼

從上面咱們能夠發現，這三個方法都能接收兩個參數，第一個是用來匹配的參數 第二個則是用來定位到查找的位置。但endsWith的行爲與其餘兩個方法有所不一樣。它針對前n個字符，而其餘兩個方法針對從第n個位置直到字符串結束。

2.二、 字符串的拼接

• repeat：該方法返回一個新字符串，表示將原字符串重複n次

'hello'.repeat(2); // "hellohello"
'na'.repeat(0); // ""
'he'.repeat(2.9); // "hehe"
'hello'.repeat(Infinity); // RangeError
'hello'.repeat(-1); // RangeError
'na'.repeat(NaN) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
複製代碼

這裏值得咱們注意的是： 一、 參數若是是小數，會被取整 二、 若是repeat的參數是負數或者Infinity，會報錯 三、 參數NaN等同於 0。 四、 參數是字符串，則會先轉換成數字。

• padStart/padEnd：若是某個字符串不夠指定長度，會在頭部或尾部補全

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
複製代碼

這裏值得注意的是： 一、該方法接收兩個參數，第一個參數是字符串補全生效的最大長度，第二個參數是用來補全的字符串 當第二個參數被省略的時候，默認用空格填充 二、 若是原字符串的長度，等於或大於最大長度，則字符串補全不生效，返回原字符串。 三、 若是用來補全的字符串與原字符串，二者的長度之和超過了最大長度，則會截去超出位數的補全字符串。

• 模版字符串 咱們知道，在es6之前的語法，字符串的拼接通常都採用：

var fristStr = "dadasdas"
var secondStr = "bbjbj"
var str = fristStr +secondStr;
複製代碼

在es6中，其實新定義了一種字符串拼接的方式：模版字符串``

模板字符串（template string）是加強版的字符串，用反引號（`）標識。它能夠看成普通字符串使用，也能夠用來定義多行字符串，或者在字符串中嵌入變量。

上面的代碼咱們就能夠簡單的寫成：

var str = `${fristStr} +${secondStr}`;
複製代碼

設置裏面都還能夠作一些運算

var a1 = 1;
var a2 = 2;
console.log(result) // a1+a2 = 3
複製代碼

關於模版字符串，確定還有更多、更細緻的用法，我這裏就不作具體的舉例了。怎麼說了，有些奧妙只有本身在實際使用中才能領會的。

說在最後

關於字符串的使用，這一篇文章把我在開發中常常能用到的一些方法都作了一次總結 怎麼說呢？也沒幾個方法。掌握、記憶起來仍是比較簡單的，其實最難的無非就是正則表達式哪一塊，如今中午也沒什麼時間了，我就很少說了 先睡會兒覺 等今晚下班了，再來細細的探究所謂的正則表達式吧。