前端點滴（JS基礎）（三）---- String 對象

JavaScript 內置對象（二）

String 對象

String 對象用於處理文本（字符串）。

1. String 對象實例

var txt = new String("string");
或者更簡單方式：
var txt = "string";

2. String 對象方法

String 對象的查詢、連接

1. charAt() 返回在指定位置的字符。

語法：string.charAt(index)

定義：
charAt() 方法查詢並返回指定位置的字符。
第一個字符位置爲 0, 第二個字符位置爲 1,以此類推。

實例：

/* 查詢字符串中第三個元素，並返回 */
/* 查詢第 n 個 ，   index = n-1 */

var str = "HELLO WORLD";
var n = str.charAt(2);
console.log(n);  //=>  L

2. charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。

語法：string.charCodeAt(index)

定義：
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。
字符串中第一個字符的位置爲 0， 第二個字符位置爲 1，以此類推。

常用的unicode編碼範圍：
0x表示16進制
漢字：[0x4e00,0x9fa5]（或十進制[19968,40869]）
數字：[0x30,0x39]（或十進制[48, 57]）
小寫字母：[0x61,0x7a]（或十進制[97, 122]）
大寫字母：[0x41,0x5a]（或十進制[65, 90]）

實例：

/* 查詢字符串第三個字符的unicode編碼，並返回 */

var str = "HELLO WORLD";
var n = str.charCodeAt(2);
console.log(n);   //=>  76

3. includes() 查找字符串中是否包含指定的完整的子字符串。

語法：string.includes(searchvalue, start)

定義：
includes() 方法用於判斷字符串是否包含指定的完整的子字符串。
如果找到匹配的字符串則返回 true，否則返回 false。

注意： includes() 方法區分大小寫。
注意： searchvalue 必需，要查找的字符串。
注意： start 可選，設置從那個位置開始查找，默認爲 0。
注意： 返回值是一個Boolean類型的值。
注意： 填寫 index 時，需要考慮空白字符串。

實例：

/* 默認從字符串開頭查找 */
var str = "Hello world, welcome to the Runoob。";
var n = str.includes("world");
console.log(n);  //=> true

/* 從規定的地方開始查找 */
var n = str.includes("world",8);
console.log(n);  //=> false

4. indexOf() 返回某個指定的字符串值在字符串中首次出現的位置。

語法：string.indexOf(searchvalue,start)

定義：
indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。
如果沒有找到匹配的字符串則返回 -1。

注意： indexOf() 方法區分大小寫。
注意： 填寫 index 時，需要考慮空白字符串，以及一些符號（,!.?）。
參數說明同上；

實例：

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
console.log(n);  //=> 13

/* 注意區分大小寫 */
var str="Hello world, welcome to the universe.";
var n=str.indexOf("Welcome");
console.log(n);  //=> -1

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome",13);
console.log(n);  //=> 13

5. lastIndexOf() 從後向前搜索字符串，並從起始位置（0）開始計算返回字符串最後出現的位置。

語法：string.lastIndexOf(searchvalue,start)

定義：
lastIndexOf() 方法可返回一個指定的字符串值最後出現的位置，如果指定第二個參數 start，則在一個字符串中的指定位置從後向前搜索。
開始檢索的位置在字符串的 start 處或字符串的結尾（沒有指定 start 時）。
如果沒有找到匹配字符串則返回 -1 。

注意： lastIndexOf() 方法是區分大小寫的。
注意： 定義了start就從start開始往前搜索。沒有定義就從0往後搜索。
注意： 該方法將從後向前檢索字符串，但返回是從起始位置 (0) 開始計算子字符串最後出現的位置。 看它是否含有字符串。

實例：

/* 沒有定義start */
var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob");
console.log(n);  //=> 28

/* 定義了start */
var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob",9);
console.log(n);  //=>  -1 

/* 定義了start */
var str="I am from runoob，welcome to runoob site.";
var n=str.lastIndexOf("runoob",20);
console.log(n);  //=>  10

6. match() 查找找到一個或多個正則表達式的匹配。

語法：string.match(regexp)

定義：
match() 方法可在字符串內檢索指定的值，或找到一個或多個正則表達式的匹配。regexp 表示正則表達式

注意： match() 方法是區分大小寫的。但是可以設置 i 標誌忽略大小寫。
注意： match() 方法將檢索字符串 String Object，以找到一個或多個與 regexp 匹配的文本。這個方法的行爲在很大程度上有賴於 regexp 是否具有標誌 g（全局標誌）。如果 regexp 沒有標誌 g，那麼 match() 方法就只能在 stringObject 中執行一次匹配（只返回一個）。如果沒有找到任何匹配的文本， match() 將返回 null。否則，它將返回一個數組，其中存放了與它找到的匹配文本有關的信息。

實例：

/* 不區分大小寫（ i 標誌），全局查找 */
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/gi);
console.log(n);  //=>  ["ain", "AIN", "ain", "ain"]

/* 區分大小寫，全局查找 */
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/g);
console.log(n);   //=> ["ain", "ain", "ain"]

/* 區分大小寫，非全局查找 */
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/ain/); 
console.log(n);   //=> ["ain"]

/* 返回null */
var str="The rain in SPAIN stays mainly in the plain"; 
var n=str.match(/as/); 
console.log(n);   //=> null

7. search() 查找與正則表達式相匹配的值。

語法：string.search(searchvalue)

定義：
search() 方法用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串。輸出的是字符串匹對位置
如果沒有找到任何匹配的子串，則返回 -1。

注意： 默認情況下search() 區分大小寫。
注意： searchvalue可以是正則表達式，還可以是字符串

實例：

/* 匹配字符串 */
var str="Visit MyBlog!"; 
var n=str.search("MyBlog");
console.log(n);  //=>  6

/* 匹配正則表達式 */
var str="Visit MyBlog!"; 
var n=str.search(/MyBlog/);
console.log(n);  //=>  6

/* 匹配正則表達式 */
var str="Visit MyBlog，Visit MyBlog，Visit MyBlog!"; 
var n=str.search(/MyBlog/g);
console.log(n);  //=>  6

/* 匹配正則表達式，忽略大小寫 */
var str="Visit MyBlog，Visit MyBlog，Visit MyBlog!"; 
var n=str.search(/myBlog/gi);
console.log(n);  //=>  6

8. startsWith() 查看字符串是否以指定的子字符串開頭。

語法：string.startsWith(searchvalue, start)

定義：
startsWith() 方法用於檢測字符串是否以指定的子字符串開始。
如果是以指定的子字符串開頭返回 true，否則 false。

注意： startsWith() 方法區分大小寫。
注意： start 可選，查找的開始位置，默認爲 0。
注意： 返回的是Boolean類型的值

實例：

/* 默認情況 */
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world");
console.log(n);   //=> false

/* 帶有start */
var str = "Hello world, welcome to the Runoob.";
var n = str.startsWith("world", 6);
console.log(n);  //=> true

9. valueOf() 返回某個字符串對象的原始值。

語法：string.valueOf()

定義：
valueOf() 方法可返回 String 對象的原始值。

注意： valueOf() 方法通常由 JavaScript 在後臺自動進行調用，而不是顯式地處於代碼中。

實例：

var str="Hello world!";
var n = str.valueOf();
console.log(n);  //=>  "Hello world!"

10. concat() 連接兩個或更多字符串，並返回新的字符串。

語法：string.concat(string1, string2, ..., stringX)

定義：
concat() 方法用於連接兩個或多個字符串。

注意： 該方法沒有改變原有字符串，但是會返回連接兩個或多個字符串新字符串。
注意： 連接多個字符串是用逗號“，”隔開。

實例：

var str1 = "Hello ";
var str2 = "world!";
var n = str1.concat(str2);
console.log(n);  //=>  "Hello world!"

String 對象的替換、轉換

1. replace() 在字符串中查找匹配的子串， 並替換與正則表達式匹配的子串。

語法：string.replace(searchvalue,newvalue)

定義：
replace() 方法用於在字符串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。（只替換一次）

注意： replace()不會改變原始的字符串。
注意： 默認情況下區分大小寫。
注意： searchvalue 可以是字符串，也可以是正則表達式

實例：

/* 默認情況 */
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace("Microsoft","MyBlog");
console.log(n);    //=>  "Visit MyBlog! Visit Microsoft!"

/* 使用正則表達式 ，加上全局標誌*/
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace(/Microsoft/g,"MyBlog");
console.log(n);     //=>  "Visit MyBlog! Visit MyBlog!"

/* 使用正則表達式，忽略大小寫 ，加上全局標誌*/
var str="Visit Microsoft! Visit Microsoft!";
var n=str.replace(/microsoft/gi,"MyBlog");
console.log(n);     //=>  "Visit MyBlog! Visit MyBlog!"

實例二 （知識回顧）（通過 prototype 爲 JavaScript 的 String 對象添加方法，來實現將所有 “Microsoft” 替換爲 “MyBlog”）：

var str="Visit Microsoft! Visit Microsoft!";
String.prototype.replaceFn = function (search, replacement){
	var target = this;
	return target .replace(new RegExp(search,"g"),replacement);
}
console.log(str.replaceFn("Microsoft","MyBlog"));  //=>  "Visit MyBlog! Visit MyBlog!"

2. toLowerCase() 把字符串全轉換爲小寫。

語法：string.toLowerCase()

定義：
toLowerCase() 方法用於把字符串全轉換爲小寫。

注意： toLowerCase() 不會改變原始字符串。

實例：

var str="MyBlog";
var n = str.toLowerCase();
console.log(str);  //=>  "MyBlog"
console.log(n); //=>  "myblog"

3. toUpperCase() 把字符串全轉換爲大寫。

語法：string.toUpperCase()

定義：
toUpperCase() 方法用於把字符串全轉換爲大寫。

注意： toUpperCase() 不會改變原始字符串。

實例：

var str="myblog";
var n = str.toUpperCase();
console.log(str);  //=>  "myblog"
console.log(n); //=> "MYBLOG"

4. toLocaleLowerCase() 根據本地主機的語言環境把字符串轉換爲小寫。

語法：string.toLocaleLowerCase()

定義：
toLocaleLowerCase() 方法根據本地主機的語言環境把字符串轉換爲小寫。
本地是根據瀏覽器的語言設置來判斷的。
通常，該方法與 toLowerCase() 方法返回的結果相同

注意： toLocaleLowerCase() 不會改變原始字符串。

實例：

var str="MyBlog";
var n = str.toLocaleLowerCase();
console.log(str);  //=>  "MyBlog"
console.log(n); //=>  "myblog"

5. toLocaleUpperCase() 根據本地主機的語言環境把字符串轉換爲大寫。

語法：string.toLocaleUpperCase()

定義：
toLocaleUpperCase() 方法根據本地主機的語言環境把字符串轉換爲小寫。
本地是根據瀏覽器的語言設置來判斷的。
通常，該方法與 toUpperCase() 方法返回的結果相同

注意： toLocaleUpperCase() 不會改變原始字符串。

實例：

var str="myblog";
var n = str.toLocaleUpperCase();
console.log(str);  //=>  "myblog"
console.log(n); //=> "MYBLOG"

6. toString() 返回一個字符串。

語法：string.toString()

定義：
toString() 方法返回一個表示 String 對象的值。

實例：

var str = "MyBlog";
var res = str.toString();
console.log(res);  //=>  "MyBlog"

String 對象的截取、分割、重複（複製粘貼）、去空白

1. slice() 提取字符串的片斷，並在新的字符串中返回被提取的部分。

語法：string.slice(start,end)

定義：
slice(start, end) 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。
使用 start 和 end 參數來指定字符串提取的部分。
字符串中第一個字符位置爲 0, 第二個字符位置爲 1, 以此類推。

注意： slice() 不會改變原始字符串。
注意： 如果是負數，則該參數規定的是從字符串的尾部開始算起的位置。也就是說，-1 指字符串的最後一個字符，-2 指倒數第二個字符，以此類推。

實例：

/* 默認截取全部 */
var str="Hello world!";
var n=str.slice(0);
console.log(n);  //=>  "Hello world!"

/* 帶有start，end參數 */
/* 從第n個字符開始截取   start = n-1*/
/* 從第二個字符開始截取（截取第二個字符） ，截取到第六個*/
var str="Hello world!";
var n=str.slice(1,6);
console.log(n);  //=> "ello "

/* 截取第一個字符，並要求返回str字符串首字母大寫 */
var str="hello world!";
var n =str.slice(0,1).toUpperCase();
var n2 = str.slice(1);
var n3 = n+n2;
console.log(n3);  //=> "Hello world!"

/* 提取最後一個字符 */
var str="Hello world!";
var n=str.slice(-1);
console.log(n);  //=> !

2. substr() 從起始索引號提取字符串中指定數目的字符。

語法：string.substr(start,length)

定義：
substr() 方法可在字符串中抽取從 開始 下標開始的指定數目的字符。

注意： substr() 不會改變原始字符串。
注意： 不設置length，默認到最後。
注意： substr() 的參數指定的是子串的開始位置和長度，因此它可以替代 substring() 和 slice() 來使用。
在 IE 4 中，參數 start 的值無效。在這個 BUG 中，start 規定的是第 0 個字符的位置。在之後的版本中，此 BUG 已被修正。
ECMAscript 沒有對該方法進行標準化，因此反對使用它。

實例：

/* 從第n個字符開始截取（截取第n個）   start = n-1 */
/* 截取第三個字符到最後 */
var str="Hello world!";
var n=str.substr(2);
console.log(n);  //=>  "llo world!"

/* 截取第三個字符*/
var str="Hello world!";
var n=str.substr(2,1);
console.log(n);  //=>  "l"

3. substring() 提取字符串中兩個指定的索引號之間的字符。

語法：string.substring(from, to)

定義：
substring() 方法用於提取字符串中介於兩個指定下標之間的字符。

注意： substring() 不會改變原始字符串。

實例：

/* 截取第3~7的字符 */
var str="Hello world!";
var n=str.slice(2,7);
console.log(n);  //=> "llo w"

4. split() 把字符串分割爲字符串數組。

語法：string.split(separator,limit)

定義：
split() 方法用於把一個字符串分割成字符串數組。

注意： split() 方法不改變原始字符串。
注意： 如果把空字符串 ("") 用作 separator，那麼 stringObject 中的每個字符之間都會被分割。（小分割）
注意： limit 該參數可指定返回的數組的最大長度。如果設置了該參數，返回的子串不會多於這個參數指定的數組。如果沒有設置該參數，整個字符串都會被分割，不考慮它的長度。

實例：

/* 大分割 */
var str="How are you doing today?";
var n=str.split(' ');
console.log(n)  //=> ["How", "are", "you", "doing", "today?"]

/* 小分割 */
var str="How are you doing today?";
var n=str.split('');
console.log(n)  //=> ["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]

/* 設置了 length */
var str="How are you doing today?";
var n=str.split(' ',2);
console.log(n)  //=> ["How", "are"]

5. repeat() 複製字符串指定次數，並將它們連接在一起返回。

語法：string.repeat(count)

定義：
epeat() 方法字符串複製指定次數。（複製粘貼）

注意： repeat() 方法不改變原始字符串。
注意： count 爲複製粘貼次數，必填，若果不填返回結果爲 " "

實例：

var str = "hello";
var res  = str.repeat(2);
console.log(res);   //=> "hellohello"

var str = "hello";
var res  = str.repeat();
console.log(res);   //=> ""

6. trim() 去除字符串兩邊的空白

語法：string.trim()

定義：
trim() 方法用於刪除字符串的頭尾空格。

注意： trim() 方法不會改變原始字符串。

實例：

var str = "       hello        ";
var res = str.trim();
console.log(res);  //=> "hello"

如果瀏覽器不支持 trim() 方法，還可以使用replace()、正則表達式來實現：

function myTrim(x) {
  return x.replace(/^\s+|\s+$/gm,'');   // 此爲正則表達式，表示字符串全局頭尾空白被''（空）替代
}
function myFunction() {
  var str = myTrim("        Runoob        ");
  console.log(str);
}
myFunction();  //=>  "Runoob"

總結

String 對象中的所有方法均不會改變原始String對象實例。
String 對象中的常用方法：
查詢：indexOf、match、search。查詢方法默認情況下均對大小寫敏感。
連接：concat。
替換：replace。
轉換：toLowerCase、toUpperCase。
截取：slice、substr。
分割：split。
複製：repeat。
去空白：trim。
其中涉及到正則表達式，在後期進行表單驗證、登錄驗證…信息驗證時顯得非常關鍵