字串型別在前端開發者看來是使用最頻繁的型別之一，網站上可見的各種文案，幾乎都是字串或者陣列型別的資料，我們經常需要使用的操作最多的就是以下幾點：讀取字串、轉換字串、清空字串、拼接字串、擷取字串等。

========（我們先來看一下Es6中最實用的一個模板字面量，後面會就使用率較高的字串方法逐個分析。）

----------模板字面量（從 ECMAScript 2015 開始，字串字面量也可以稱為模板字面量：）

----字串不區分單引號‘ ’和雙引號“ ”所有的字串拼接都會識別，如果你的字串比較長，可分行使用“+”來拼接。

例如：

let longString = "This is a very long string which needs " +

"to wrap across multiple lines because " +

"otherwise my code is unreadable.";

console.log(longString);

=> "This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable."

-----或者也可以使用 "\" 來告訴瀏覽器，你需要繼續寫這個字串，但需要保證 "\"後面是沒有任何符號或者是空格的；

例如：

let longString = "This is a very long string which needs \

to wrap across multiple lines because \

otherwise my code is unreadable.";

console.log(longString)

=>"This is a very long string which needs to wrap across multiple lines because otherwise my code is unreadable."

-----以前，我們用單引號或雙引號表示字串。

let a = "123"; //單引號

let b = "123";//雙引號

-------現在，使用模板字面量反撇號` `。在實際開發中，這是經常都要用到的方法。

let c = `123` //反撇號

在字串中使用反撇號，只需要加上轉義符 ，這時中間的`，沒有什麼意義：

let d = `12\`3` //字串內插入反撇號的方式。 =》 "12`3"

------在多行字串的使用價值：

在沒有模板字面量的時候，我們要實現多行字串，必須用到換行符：

let a = "123\n456";

console.log(a);

// 123

// 456

-------------------使用模板字面量，就可以非常簡單的實現需求。

let a = `123

456`;

console.log(a) // 123

// 456

---------------在模板字面量插入變數的方法。

在原來的我們要在字串中拼接變數，需要用‘+變數+’或者 + 來實現，而現在 而是使用${params}直接插入你需要新增到字串的位置。這種方式也叫作字串佔位符。佔位符支援互相巢狀模板字面量，強大吧。有了它，我們終於可以拋棄 + 拼接字串的噁心做法了

-------字串和變數拼接：

var str="lixiaoqing";

console.log(`wo shi ${str}`) =》"wo shi lixiaoqing"

-------變數和變數拼接：

var str0="wo shi ";

var str="lixiaoqing";

console.log(str0+`${str}`) // wo shi lixiaoqing

-------模板字面量的終極用法

tag是一個方法，方法名你可以任意命名，這種寫法被稱作標籤模板。

function tag(literals, ...substitutions) {

//literals是陣列，第一個位置是""，第二個位置是佔位符之間的字串，在本例中是haha

//substitutions是字串中的模板字面量，可能多個

//函式最終返回字串

} (此方法待完成)

一、charAt() 根據下標查詢/訪問字串的某個字元

var str1="age";

console.log(str1.charAt(2)) =>e

還可以使用 [ ] 的形式來訪問,中括號填寫的是字串的下標

var str1="age";

console.log(str1[2]) =>e

二、字串的比較">" , "<" ,"===" ,">=" ,"<=" ,"!=="

1.字母字串比較

var str1="aa";

var str2="bb";

console.log(str1<str2) =>true

2.數字字串比較（會比較兩個數字的大小）

var str1="10";

var str2="15";

var str3="10";

console.log(str1<str2,str1===str3) =>true,true

--------基本字串和字串物件的區別

請注意區分 JavaScript 字串物件和基本字串值 . ( 對於 Boolean 和Numbers 也同樣如此.)

var s_prim = "foo";var s_obj = new String(s_prim);

console.log(typeof s_prim); // Logs "string"

console.log(typeof s_obj); // Logs "object"

三、字串的長度 length

var str="我愛你中國";

console.log(str.length) =>5

四、charCodeAt(index) 返回表示給定索引的字元的Unicode的值。

方法返回0到65535之間的 UTF-16 編碼單元匹配 Unicode 編碼單元整數，當charCodeAt()括號中沒有值時，預設為0;當有引數時，查詢的是字串的索引值， index的值為一個大於等於 0，小於字串長度的整數

例：

var str="abc";

console.log(str.charCodeAt()) =》97

var str="abc";

console.log(str.charCodeAt(0)) =》97

結果都是一樣的，查詢到"a"在編碼中的位置為97

var str="abc";

console.log(str.charCodeAt(1)) =》98

字母"b"在編碼中的位置為98

五、str.concat（str1,str2....）字串拼接

在字串拼接中，最常用的還是“+”；

var str="d";

var str1="e";

var str2="f";

var str3=str+str1+str2;

console.log(str3) =>"def"

當然我們也可以使用concat(....)

var str1="a";

var str2="b";

var str3="c";

console.log(str1.concat(str2,str3)) =>"abc"

六、includes（str）檢測一個字串是否在另一個字串裡包含，區分大小寫

var str="abcdef";

console.log(str.includes("def")); =>true

而我們把“def”換成大寫的“DEF”時，並不能檢測到

var str="abcdef";

console.log(str.includes("DEF")); =>false

七、endsWith() 檢測字串是不是以“str”結尾的

str.endsWith(searchString [, position]);

searchString

要搜尋的子字串。

position

在 str 中搜索 searchString 的結束位置，當不填寫值時，預設值為 str.length，也就是真正的字串結尾處，從1開始，空格和符號也算字元。 也是開始的位置

例：

1、當沒有第二個引數時。預設第二個引數時字串的length

var str = "To be, or not to be, that is the question.";

console.log(str.endsWith("question.")) =>true

2、 第二個引數的開始時從“1”開始的，而不是從“0”

var str = "To be, or not to be, that is the question.";

console.log(str.endsWith("T",1)) =>true;

3、第二個引數的計算是包含空格和標點符號的

var str = "To be, or not to be, that is the question.";

console.log(str.endsWith("To be", 5)) =>true

八、indexOf()方法返回str查詢的結果，如果是有返回指定索引（查詢到結果的第一個字元的位置），如果沒有返回“-1”，區別大小寫

例：

"ABC".indexOf("A") =》0 查詢到“A”,返回位置為索引“0”

"ABC".indexOf("e") =》-1並沒有查詢到“e”,返回-1

"ABC".indexOf("AB") =》0 同樣查詢到“AB”,返回結果以第一個字元的位置做結果

----------檢測是否存在某字串

當檢測某個字串是否存在於另一個字串中時，可使用下面的方法：

"Blue Whale".indexOf("Blue") !== -1; // true"Blue Whale".indexOf("Bloe") !== -1; // false

使用 indexOf 統計一個字串中某個字母出現的次數

在下例中，設定了 count 來記錄字母 e 在字串 str 中出現的次數：

var str = "To be, or not to be, that is the question.";

var count = 0;

var pos = str.indexOf("e");

while (pos !== -1) {

count++;

pos = str.indexOf("e", pos + 1);

//重新給pos賦值，從上個查詢到str的位置+1的位置繼續查詢，如果能查到就會再進迴圈，count+1

}

console.log(count); // displays 4

九、lastIndexOf()方法返回指定值在呼叫該方法的字串中最後出現的位置，如果沒找到則返回-1

語法

str.lastIndexOf(searchValue[, fromIndex])

引數

searchValue

一個字串，表示被查詢的值。

fromIndex

從呼叫該方法字串的此位置處開始查詢。可以是任意整數。預設值為 str.length。如果為負值，則被看作 0。如果 fromIndex > str.length，則 fromIndex 被看作 str.length。

例：

當只有一個引數的時候，第二個值預設str.length,也就是查詢整個字串，查詢到這個str在整個字串中最後出現的位置

"AVBDHIUOKL".lastIndexOf("O"); //7

"AFGHJKLL:JJHKAJALKA".lastIndexOf("A"); //18

當有第二個引數時，第二個引數會被看成查詢這個字串的結束位置

"AFGHJKLL:JJHKAJALKA".lastIndexOf("A",10);

//0從0到第10個索引值時，只在0的位置查詢到"A",所以返回0

"AFGHJKLL:JJHKAJALKA".lastIndexOf("A",15);//15

//0從0到第15個索引值時，在第15的位置查詢到"A",所以返回15

十、str.repeat(count)構造並返回一個新字串，該字串是迴圈完成後的新字串

repeat(count)的值一般為數字， 就好比"a".repeat(5)=="a"*5=="aaaaa"

但也會出現其他情況，例如以下：

1.當值為“-1”時，會報錯，所以值不能為負數

"abc".repeat(-1) // RangeError: repeat count must be positive and less than inifinity

2.那我們值為“0”時，會有什麼情況呢？將不會迴圈，返回一個空字串

"abc".repeat(0) // ""

3.那麼我們接下來輸入一個正常的數字“1”，repeat給我們返回了"abc"*1的結果,它將迴圈一遍

"abc".repeat(1) // "abc"

4.那麼我們試試“2”，看看會不會返回迴圈兩次，確實它返回了字串迴圈兩遍的結果

"abc".repeat(2) // "abcabc"

5.那我們來試試小數，看看是迴圈幾次呢，結果是它將小數點後面的抹去了，只迴圈了前面的數字

"abc".repeat(3.5) // "abcabcabc" 引數count將會被自動轉換成整數.

6.那我們試試“1/0 ”，並沒有解析出來，因為1/0==inifinity

"abc".repeat(1/0) // RangeError: repeat count must be positive and less than inifinity

7.那我們再來試試字串呢？ 結果它將字串自動轉為了number,並正確迴圈並返回了。

"abcd".repeat("2") // "abcabc"

8.那我們來試試，看看它是否能解析中文漢字呢？ 結果是並沒有，也沒有報錯

"abcd".repeat("二") // ""

十一、str.slice(beginSlice,endSlice)擷取字串，第一個引數為開始位置，第二個引數為結束位置，前包後不包

1.slice() 從一個字串中提取字串並返回新字串。在一個字串中的改變不會影響另一個字串。也就是說，slice 不修改原字串，只會返回一個包含了原字串中部分字元的新字串。

2.注意：slice() 提取的新字串包括beginSlice但不包括 endSlice。

3.提取新字串從第二個字元到第四個 (字元索引值為 1, 2, 和 3)。

"avxdsdfasd".slice(1, 4) //vxd

4. 提取第三個字元到倒數第二個字元。-1為倒數第一個

"abckdesdf".slice(2, -1) //ckdesd

5.當開始的值和結束的值都為負數時,結果會從後向前數，從-3到-1之間的值（前包後不包）

"abckdesdf".slice(-3, -1) //"sd"

十二、str.split()方法，使用指定的分隔符字串將一個string物件分割成字串陣列

1.當括號中為空值時，直接將它轉為字串陣列

console.log("abcdefg".split()); // ["abcdefg"]

2.當括號中為空引號時，它將每個字串都分割了出來

console.log("abcdefg".split("")); // ["a", "b", "c", "d", "e", "f", "g"]

當在空引號中加上一個空格時，它會以你原字串的空格來分割

"Webkit Moz O ms Khtml".split( "" ) // ["Webkit", "Moz", "O", "ms", "Khtml"]

3.當括號中為字串中的字母，它將以當前字母分割字串

console.log("abcdefg".split("a")); // ["", "bcdefg"]

console.log("abcdefg".split("b")); // ["a", "cdefg"]

4.當括號中字串並不是當前字串中包含的，它只接轉成陣列字串，不做其他操作

console.log("abcdefg".split("bbbb")); // ["abcdefg"]

十三、startsWith() 檢測字串是不是以“str”開頭的，根據判斷返回true,false(ES6新添，與endsWith相反)

語法

str.startsWith(searchString [, position]);

引數

　　　　searchString

　　　　要搜尋的子字串。

　　　　position

　　　　在 str 中搜索 searchString 的開始位置，預設值為 0，也就是真正的字串開頭處。

var str = "To be, or not to be, that is the question.";

console.log(str.startsWith("To be")) // true

console.log(str.startsWith(" be")) // false

console.log(str.startsWith("not to be", 10)) // true

console.log(str.startsWith("not to be")) // false

十四、str.substr()方法返回一個字串中從指定位置開始到指定字元數的字元。

str.substr(start[, length])

　

　start:開始擷取的位置，開始索引為0，最大為str.length-1，也可為負數；

　　length:要擷取的長度，如果不填寫，預設為str.length-1;最小為1，最大為str.length-1.負數無效，如果為0或者負值，返回一個空字串。

var str = "abcdefghij";

1.當兩個值都為正值，且都在範圍之內：

console.log("(1,2): " + str.substr(1,2)); // (1,2): bc

2.當擷取位置為負數時，會從後向前數，倒數第一個索引為-1，擷取的長度會從當前位置向後數

console.log("(-3,2): " + str.substr(-3,2)); // (-3,2): hi

3.當只有開始位置的值，並且為負值時，會從當前位置，擷取到字串的末尾

console.log("(-3): " + str.substr(-3)); // (-3): hij

4.當只有開始的位置，為正值，第二個值預設是str.length-1,也就是擷取到字串的末尾

console.log("(1): " + str.substr(1)); // (1): bcdefghij

5.當開始的索引是超過字串長度的負數時，就相當於字串一直是從後向前數的

console.log("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab

6.當開始的索引是超過字串的長度的正值時，無法擷取到內容，返回空字串

console.log("(20, 2): " + str.substr(20,2)); // (20, 2):""

十五、str.substring()擷取開始位置和結束位置之間的字串，前包後不包

str.substring(start,stop)

start:開始擷取的位置，不為負數；

stop：結束的擷取位置，不為負數；

當引數為負數時，不識別，預設轉為0；

當第二個值為負數時，預設轉為0，,並調換開始和結束的兩個值的位置，

var str= "abcdefghij";

1.當開始和結束都為正值，並都在範圍內，從索引為1的位置擷取到索引為2的位置；

console.log("(1,2): " + str.substring(1,2)); // (1,2): b

2.當只有一個開始位置的值時，會從開始位置直接擷取到結束位置；

console.log("(1): " + str.substring(1)); // (1): bcdefghij

3.當開始位置為負數時,會直接轉為0來擷取；

console.log("(-1): " + str.substring(-1)); // (-1): abcdefghij

4.當結束位置超過字串的長度，會預設忽略第二個引數；

console.log("(1,20): " + str.substring(1,20)); // ((-1): bcdefghij

5.當結束位置為負數，會直接轉為0，並交換開始和結束的位置；

console.log("(1,-5): " + "sdsdfsdf".substring(1,-5)); // ((1,-5): s

6.當開始位置和結束位置的值為同一值時，返回空字串

console.log("(1,1): " + "sdsdfsdf".substring(1,1)) ; // ((1,1): ""

十六、str.toLowerCase()將字串轉為小寫的形式（並不會影響字串本身的值）

console.log("ABC".toLowerCase()); // "abc"

十七、str.UpperCase()將字串轉為大寫的形式（並不會影響字串本身的值）

console.log( "alphabet".toUpperCase() ); // "ALPHABET"

十八、str.toString()方法用於將現有的物件轉為字串；

1.陣列轉字串；

console.log( [1,2,3,4,5].toString()); //"1,2,3,4,5"

2.物件轉字串，將會返回[object Object]，故不支援轉換

var a={a:1,b:2};

console.log( a.toString()); // [object Object]

trim()方法並不會影響原字串，會返回一個新字串。

例：

var orig = " foo ";

console.log(orig.trim()); // "foo"

var orig = "foo ";

console.log(orig.trim()); // "foo"

二十、String.fromCharCode(num1,num2,、、numN)用於返回當前數字所對應的字元

語法

String.fromCharCode(num1, ..., numN)

引數

num1, ..., numN

一組序列數字，表示 Unicode 值。

描述

該方法返回一個字串，而不是一個 String 物件。

由於 fromCharCode 是 String 的靜態方法，所以應該像這樣使用：String.fromCharCode()，而不是作為你建立的 String 物件的方法