Javascript類型系統之String字符串類型詳解

javascript沒有表示單個字符的字符型，只有字符串String類型，字符型相當於僅包含一個字符的字符串

字符串String是javascript基本數據類型，同時javascript也支持String對象，它是一個原始值的包裝對象。在需要時，javascript會自動在原始形式和對象形式之間轉換。本文將介紹字符串String原始類型及String包裝對象

定義

字符串String類型是由引號括起來的一組由16位Unicode字符組成的字符序列

字符串類型常被用於表示文本數據，此時字符串中的每個元素都被視為一個代碼點。每個元素都被認為佔有此序列中的一個位置，用非負數值索引這些位置。首字符從位置0開始，第二個字符在位置1，依次類推

字符串的長度即其中元素的個數（比如，16 位值）。空字符串長度為零，因而不包含任何元素

Unicode編碼

所有字符都可以寫成'/uxxxx'的形式，其中xxxx代表該字符的Unicode編碼。比如，/u00A9代表版權符號

var s = '/u00A9';s // "©"

若一個字符串包含實際的文本數據，每個元素都被認為是一個單獨的UTF-16單元。每個字符在JavaScript內部都是以16位（即2個字節）的UTF-16格式儲存

但UTF-16有兩種長度：對於U+0000到U+FFFF之間的字符，長度為16位(即2個字節)；對於U+10000到U+10FFFF之間的字符，長度為32位(即4個字節)，而且前兩個字節在0xD800到0xDBFF之間，後兩個字節在0xDC00到0xDFFF之間

舉例來說，U+1D306對應的字符"?"，寫成UTF-16就是0xD834 0xDF06。瀏覽器會正確將這四個字節識別為一個字符，但是javascript內部的字符長度總是固定為16位，會把這四個字節視為兩個字符

var s = '/uD834/uDF06';s // "?"s.length // 2

對於U+10000到U+10FFFF的4字節Unicode字符，javascript總是視為兩個字符(字符length屬性為2)

引號

字符串String是由雙引號(")或單引號(')聲明的。而Java則是用雙引號聲明字符串，用單引號聲明字符。由於ECMAScript 沒有字符類型，所以可使用這兩種表示法中的任何一種，但左右引號必須匹配

//正確var sColor1 = "red";var sColor2 = 'red';//錯誤var sColor1 = "red';var sColor2 = 'red";

由單引號定界的字符串中可以包含雙引號，由雙引號定界的字符串也可以包含單引號

'key = "value"'"It's a long journey"

javascript代碼可能會夾雜HTML代碼的字符串，HTML代碼也會夾雜javascript代碼。因此，最好在javascript和HTML代碼中各自使用獨自的引號風格

javascript中使用單引號表示字符串，在HTML事件處理程序中使用雙引號表示字符串

<button onclick = "alert('thanks')">click me</button>

反斜線

如果想在單引號定界的字符串中使用單引號，或在雙引號定界的字符串中使用雙引號，則需要使用反斜線(/)

常見情況是英文縮寫和所有格寫法的撇號和單引號是同一個字符，所以這時必須使用反斜線(/)來轉義撇號

'Wouldn/'t you prefer this book?' //"Wouldn't you prefer this book?"'Did she say /'Hello/'?' //"Did she say 'Hello'?""Did she say /"Hello/"?" //"Did she say "Hello"?"

多行字符

字符串默認只能寫在一行內，分成多行將會報錯

//報錯Uncaught SyntaxError: Invalid or unexpected token

'a

b

c';

在ECMAScript3中，字符串必須寫在一行中

在ECMAScript5中，字符串可以拆分成數行，每行必須以反斜線(/)結束

如果希望在字符串直接量中另起一行，可以使用轉義字符/n

 //"onelongline"'one/long/line'/*"twolines"*/'two/nlines'

轉義字符

在javascript字符串，反斜線(/)有著特殊的用途，反斜線符號後加一個字符，就不表示它們的字面含義，用來表示一些特殊字符，稱為轉義字符

/0 空字節

/n 換行

/t 製表

/b 空格

/r 回車

/f 進紙

// 斜杠

/' 單引號

/" 雙引號

/xnn 以十六進制nn表示一個字符(n為0-f)，如/x41表示'A'

/unnnn 以十六進制nnnn表示一個Unicode字符(n為0-f)，如/u03a3表示希臘字符ε

如果在非特殊字符前面使用反斜杠，則反斜杠會被省略

'/a' // "a"

如果字符串需要包含反斜杠，則反斜杠前面需要再加一個反斜杠，用來對自身轉義

"Prev // Next" // "Prev / Next"

特點

javascript中的字符串是不可變的。一旦字符串被創建，就永遠無法改變它。要改變某個變量保存的字符串，首先要銷毀原來的字符串，然後再用另一個包含新值的字符串填充該變量

可以通過+運算符連接其他字符串來創建一個新字符串

var lang = "java";lang = lang + "script"; //'javascript'

以上代碼的實際過程是：首先創建一個能夠容納10個字符的新字符串，然後在這個字符串中填充'java'和'script'，最後一步是銷毀原來的字符串'java'和'script'，因為這兩個字符串已經沒用了

這個過程在後台發生，也是在某些舊版本瀏覽器(IE6)拼接字符串速度慢的原因，但瀏覽器後面版本已經解決了這個低效率問題

轉字符串

把一個值轉換為字符串有兩種方式，toString()和String()

[注意]可以使用空字符串"" + 某個值，將該值轉換為字符串

toString()

第一種是使用幾乎每個值都有的toString()方法，這個方法返回相應值的字符串表現

[注意]undefined和null沒有該方法

undefined.toString();//錯誤null.toString();//錯誤true.toString();//'true'false.toString();//'false''abc'.toString();//'abc'1.23.toString();//'1.23'({}).toString();//[object Object][1,2,3,4].toString();//'1,2,3,4'(new Date()).toString();//"Sun Jun 05 2016 10:04:53 GMT+0800 (中國標準時間)"/ab/i.toString();//'/ab/i'

String()

在不知道要轉換的值是不是undefined或null時，可以使用轉型函數String()

轉型函數String()遵循下列規則：

【1】如果值是null，則返回'null'；如果值是undefined，則返回'undefined'

【2】如果值不是null或undefined，則調用toString()方法並返回原始類型值

【3】若使用toString()方法返回的是對象，則再調用valueOf()方法返回原始類型值，若使用valueOf()方法返回的是對象，會報錯

// "3"String({toString: function () {return 3;}})// "[object Object]"String({valueOf: function () {return 2;}})// "3"String({valueOf: function () {return 2;},toString: function () {return 3;}})

長度屬性

字符串String類型的每個實例都有一個length屬性，表示字符串中的字符個數。由於字符串是不可變的，所以字符串的長度也不可變

字符串的length屬性不會在for/in循環中枚舉，也不能通過delete操作符刪除

[注意]對於字符串s來說，最後一個字符的索引是s.length - 1

 var str = "test";console.log(str.length);//4str.length = 6;console.log(str,str.length);//"test",4

實例方法

對象通用方法

String類型是與字符串對應的包裝類型，繼承了Object對象的通用方法toString()、toLocaleString()、valueOf()這三個方法

【toString()】

toString()方法返回string的原始字符串值

【toLocaleString()】

toLocaleString()方法返回string的原始字符串值

【valueOf()】

valueOf()方法返回string的原始字符串值

console.log("test".valueOf());//"test"console.log("test".toString());//"test"console.log("test".toLocaleString());//"test"

訪問字符方法

字符串的訪問字符方法總共有chartAt()、中括號[]、charCodeAt()和fromCharCode()四種

【chartAt()】

charAt()方法接收一個基於0的字符位置的參數，返回指定位置的字符。當參數為空或NaN時，默認參數為0；當參數超出範圍時，則返回一個空字符串

var str = "hello";console.log(str.charAt(1));//econsole.log(str.charAt(-1));//''console.log(str.charAt(10));//''console.log(str.charAt());//h console.log(str.charAt(NaN));//h

charAt()方法涉及到Number()函數的隱式類型轉換，如果轉換為數值，則按照上述規則輸出字符串；如果轉換為NaN，則輸出第0個字符

var str = "hello";console.log(str.charAt(true));//'e'console.log(str.charAt(false));//'h'console.log(str.charAt('abc'));//'h'console.log(str.charAt({}));//'h'console.log(str.charAt([2]));//'l'

[注意]x.charAt(pos)與x.substring(pos, pos+1)、x.substr(pos,1)、x.slice(pos,pos+1)的結果相等

var str = "hello";console.log(str.charAt(1));//'e'console.log(str.substring(1,2));//'e'console.log(str.slice(1,2));//'e'console.log(str.substr(1,1));//'e'

【中括號】

ECMAScript5定義了另一個訪問字符的方法，使用方括號加數字索引來訪問字符串中的特定字符。如果參數超出範圍或是NaN時，則輸出undefined；沒有參數時，會報錯；該方法沒有Number()轉型函數的隱式類型轉換，但參數為單數值數組時可轉換為數值

[注意]IE7-瀏覽器不支持

var str = "hello";console.log(str[0]);//hconsole.log(str[[1]]);//econsole.log(str[false]);//undefinedconsole.log(str[-1]);//undefinedconsole.log(str[NaN]);//undefinedconsole.log(str[]);//報錯

【charCodeAt()】

charCodeAt()方法類似於charAt()方法，接收一個基於0的字符位置的參數，但返回的是指定位置的字符16位Unicode編碼。返回值是一個16位的整數，在0-65535之間，即0x0000-0xffff之間

參數為空或NaN時，默認參數為0；當參數超出範圍時，則返回NaN

 var str = "hello";console.log(str.charCodeAt());//104console.log(str.charCodeAt(0));//104console.log(str.charCodeAt(1));//101console.log(str.charCodeAt(-1));//NaNconsole.log(str.charCodeAt(10));//NaNconsole.log(str.charCodeAt(NaN));//104

同樣地，charCodeAt()方法涉及到Number()函數的隱式類型轉換，如果轉換為數值，則按照上述規則輸出相應值；如果轉換為NaN，則輸出第0個字符的字符編碼

var str = "hello";console.log(str.charCodeAt(true));//101console.log(str.charCodeAt(false));//104console.log(str.charCodeAt('abc'));//104console.log(str.charCodeAt({}));//104console.log(str.charCodeAt([2]));//l08

【fromCharCode()】

String構造函數本身有一個靜態方法:fromCharCode()。這個方法的任務是接收一個或多個字符編碼，然後把它們轉換成一個字符串。從本質上看，這個方法與實例方法charCodeAt()執行的是相反的操作。若參數為空為NaN時，則返回空字符串；若參數超出0-65535的範圍，則輸出字符不可控

console.log(String.fromCharCode(104,101,108,108,111));//'hello'console.log(String.fromCharCode(0x6211,0x662f,0x5c0f,0x706b,0x67f4));//'我是小火柴'console.log(String.fromCharCode());//''console.log(String.fromCharCode(NaN));//''console.log(String.fromCharCode(-1));console.log(String.fromCharCode(65560));

如果一個字符佔用四字節，則需要拆成兩個字符表示

console.log(String.fromCharCode(0xD842, 0xDFB7)); // "?"

字符串拼接

關於字符串拼接共有concat()和加號+兩種方法

【concat()】

concat()方法用於將一個或多個字符串拼接起來，返回拼接得到的新字符串，而原字符串不發生改變。若參數(第一個參數除外)不是字符串，則通過String()方法隱式轉換為字符串，再進行字符串拼接

var stringValue = 'hello ';var result = stringValue.concat('world','!');console.log(result);//'hello world!'console.log(stringValue);//'hello'

[注意]第一個參數只能是字符串，如果是其他類型(數組除外)則報錯

(1).concat('2');//報錯

(true).concat('false');//報錯

({}).concat('abc');//報錯

[注意]由於數組也存在concat()方法，參數會按照首先出現的參數是數組還是字符串來決定如何轉換

'1,2,3,'.concat([4,5]);//'1,2,3,4,5'

[1,2,3].concat(',4,5');//[1, 2, 3, ",4,5"]

【加號運算符(+)】

雖然concat()是專門用來拼接字符串的方法，但實踐中使用更多的還是加號運算符(+)。使用加號運算符在許多時候都比concat()簡單易行

var stringValue = 'hello ';console.log(stringValue.concat('world','!'));//'hello world!'console.log(stringValue + 'world' + '!');//'hello world!'

[注意]當操作數其中一個是字符串，或者對象轉換為字符串時，才進行字符串拼接

1 + 2;//3'1' + 2;//'12'var o = {valueOf:function(){return '1';}};o + 2;//'12'var o = {valueOf:function(){return 1;}};o + 2;//3

創建子字符串

創建子字符串共有slice()、substr()和substring()三種方法

【slice()】

slice(start,end)方法需要兩個參數start和end，返回這個字符串中從start位置的字符到(但不包含)end位置的字符的一個子字符串；如果end為undefined或不存在，則返回從start位置到字符串結尾的所有字符

如果start是負數，則start = max(length + start,0)

如果end是負數，則end = max(length + end,0)

start和end無法交換位置

var stringValue = 'hello world';console.log(stringValue.slice());//'hello world'console.log(stringValue.slice(2));//'llo world'console.log(stringValue.slice(2,undefined));//'llo world'console.log(stringValue.slice(2,-5));//'llo 'console.log(stringValue.slice(2,-20));//''console.log(stringValue.slice(20));//''console.log(stringValue.slice(-2,2));//''console.log(stringValue.slice(-2,-20));//'' console.log(stringValue.slice(-2,20));//'ld'console.log(stringValue.slice(-20,2));//'he'console.log(stringValue.slice(-20,-2));//'hello wor'

slice()方法涉及到Number()轉型函數的隱式類型轉換，當start被轉換為NaN時，相當於start = 0；當end被轉換為NaN時(end為undefined除外)，則輸出空字符串

var stringValue = 'hello world';console.log(stringValue.slice(NaN));//'hello world'console.log(stringValue.slice(0,NaN));//''console.log(stringValue.slice(true,[3]));//'el'console.log(stringValue.slice(null,undefined));//'hello world'console.log(stringValue.slice({}));//'hello world'console.log(stringValue.slice('2',[5]));//'llo'

【substring()】

substring(start,end)方法需要兩個參數start和end，返回這個字符串中從start位置的字符到(但不包含)end位置的字符的一個子字符串；如果end為undefined或不存在，則返回從start位置到字符串結尾的所有字符

如果任一參數是NaN或負數，則被0取代

如果任一參數大於字符串長度，則被字符串長度取代

如果start 大於end，則交換它們的值

var stringValue = 'hello world';console.log(stringValue.substring());//'hello world'console.log(stringValue.substring(2));//'llo world'console.log(stringValue.substring(2,undefined));//'llo world'console.log(stringValue.substring(20));//''console.log(stringValue.substring(-2,2));//'he'console.log(stringValue.substring(NaN,2));//'he'console.log(stringValue.substring(-2,20));//'hello world'console.log(stringValue.substring(3,2));//'l'console.log(stringValue.substring(3,NaN));//'hel'console.log(stringValue.substring(-20,2));//'he'console.log(stringValue.substring(-20,-2));//''

同樣地，substring()方法也涉及到Number()轉型函數的隱式類型轉換

var stringValue = 'hello world';console.log(stringValue.substring(true,[3]));//'el'console.log(stringValue.substring(null,undefined));//'hello world'console.log(stringValue.substring({}));//'hello world'console.log(stringValue.substring('2',[5]));//'llo'

【substr()】

substr(start,end)方法需要兩個參數start和end，end代表返回的子字符串的字符個數；該方法返回這個字符串中從start位置的字符開始的end個字符的一個子字符串；如果end為undefined或不存在，則返回從start位置到字符串結尾的所有字符

如果start是負數，則start = max(length + start,0)

如果start是NaN，則相當於start = 0

如果end是負數或NaN，則end = 0，因此會返回空字符串

start和end無法交換位置

[注意]該方法不是ECMAScript標準，已經被棄用

[注意]IE8-瀏覽器在處理向substr()傳遞負值的情況時存在問題，它會返回原始的字符串

var stringValue = 'hello world';console.log(stringValue.substr());//'hello world'console.log(stringValue.substr(2));//'llo world'console.log(stringValue.substr(2,undefined));//'llo world'console.log(stringValue.substr(2,NaN));//''console.log(stringValue.substr(NaN,2));//'he'console.log(stringValue.substr(20));//''console.log(stringValue.substr(-2,3));//'ld'console.log(stringValue.substr(-2,20));//'ld'console.log(stringValue.substr(-20,2));//'he'console.log(stringValue.substr(-20,-2));//'' console.log(stringValue.substr(2,5));//llo w

同樣地，substr()方法也涉及到Number()轉型函數的隱式類型轉換

var stringValue = 'hello world';console.log(stringValue.substr(true,[3]));//'el'console.log(stringValue.substr(null,undefined));//'hello world'console.log(stringValue.substr({}));//'hello world'console.log(stringValue.substr('2',[5]));//'llo w'

字符串位置

有兩個從字符串中查找子字符串位置的方法：indexOf()和lastIndexOf()

【indexOf()】

indexOf(searchString,start)方法接收searchString和start兩個參數，返回searchString首次出現的位置，如果沒有找到則返回-1

該方法會隱式調用String()轉型函數，將searchString非字符串值轉換為字符串；隱式調用Number()轉型函數，將start非數字值(undefined除外)轉換為數值

searchString表示要搜索的子字符串；start表示該搜索的開始位置，若忽略該參數或該參數為undefined、NaN或負數時，start = 0

 var string = 'hello world world';console.log(string.indexOf('ld'));//9console.log(string.indexOf('ld',undefined));//9console.log(string.indexOf('ld',NaN));//9console.log(string.indexOf('ld',-1));//9console.log(string.indexOf('ld',10));//15console.log(string.indexOf('ld',[10]));//15console.log(string.indexOf('true',[10]));//-1console.log(string.indexOf(false,[10]));//-1

【lastIndexOf()】

lastIndexOf(searchString,start)方法接收searchString和start兩個參數，返回searchString最後一次出現的位置，如果沒有找到則返回-1

同樣地，該方法會隱式調用String()轉型函數，將searchString非字符串值轉換為字符串；隱式調用Number()轉型函數，將start非數字值(undefined除外)轉換為數值

searchString表示要搜索的子字符串；start表示該搜索的開始位置，若忽略該參數或該參數為undefined、NaN時，start = length - 1

[注意]與indexOf()方法不同，若start為負數，則該方法返回-1

 var string = 'hello world world';console.log(string.indexOf('ld'));//9console.log(string.indexOf('ld',undefined));//9console.log(string.indexOf('ld',NaN));//9console.log(string.indexOf('ld',-1));//-1console.log(string.indexOf('ld',10));//15console.log(string.indexOf('ld',[10]));//15console.log(string.indexOf('true',[10]));//-1console.log(string.indexOf(false,[10]));//-1

【tips】查找出字符串所有符合條件的子字符串

可以通過循環調用indexOf()或lastIndexOf()來找到所有匹配的子字符串

function allIndexOf(str,value){var result = [];var pos = str.indexOf(value);while(pos > -1){result.push(pos);pos = str.indexOf(value,pos+value.length);}return result;}console.log(allIndexOf('helllhelllhelll','ll'));//[2,7,12]

【trim()】

ECMAScript5為所有字符串定義了trim()方法。這個方法會創建一個字符串的副本，刪除前置及後綴的所有空白字符，然後返回結果

由於trim()方法返回的是字符串的副本，所以原始字符串中的前置及後綴空格會保持不​​變

[注意]IE8-瀏覽器不支持

var string = ' hello world ';console.log(string.trim());//'hello world'console.log(string);//' hello world '

空白字符不僅僅包括空格，還包括製表符(/t)、換行符(/n)和回車符(/r)

'/r/nabc /t'.trim() // 'abc'

此外，firefox、safari和webkit還支持非標準的trimRight()用於刪除字符串結尾的空白字符

var string = ' hello world ';console.log(string.trimRight());//' hello world';

【tips】用trim()來判斷輸入的字符是否為空

if(usename.trim().length){alert('correct');}else{alert('error');}

【tips】用正則表達式模擬trim()

 function fnTrim(str){return str.replace(/^/s+|/s+$/,'')} console.log(fnTrim(' hello world '));//'hello world'

大小寫轉換

ECMAScript中涉及字符串大小寫轉換的方法有4個：toLowerCase()、toLocaleLowerCase()、toUpperCase()、toLocaleUpperCase()

toLowerCase()和toUpperCase()是兩個經典的方法，借鑒自java.lang.String中的同名方法。而toLocaleLowerCase()和toLocaleUpperCase()方法則是針對特定地區的實現，對有些地區來說，針對地區的方法與其通用方法得到的結果相同，但少數語言(如土耳其語)會為Unicode大小寫轉換應用特殊的規則，這時候就必須使用針對地區的方法來保證實現正確的轉換

【toUpperCase()】

toUpperCase()方法將字符串轉換成大寫

【toLowerCase()】

toLowerCase()方法將字符串轉換成小寫

【toLocaleUpperCase()】

toLocaleUpperCase()方法將字符串轉換成大寫(針對地區)

【toLocaleLowerCase()】

toLocaleLowerCase()方法將字符串轉換成小寫(針對地區)

[注意]在不知道自己的代碼將在哪個語言環境中運行的情況下，使用針對地區的方法更穩妥

var string = 'Hello World';console.log(string.toLowerCase());//hello worldconsole.log(string.toLocaleLowerCase());//hello worldconsole.log(string.toUpperCase());//HELLO WORLDconsole.log(string.toLocaleUpperCase());//HELLO WORLD

這4種方法均不支持String()隱式類型轉換，只支持字符串類型

(true).toLowerCase();//報錯

(2).toLocaleLowerCase();//報錯

({}).toUpperCase();//報錯

([]).toLocaleUpperCase();//報錯

[注意]大小寫轉換方法可以連續使用

var string = 'Hello World';console.log((string.toUpperCase()).toLowerCase());//hello world

【localeCompare()】

localeCompare()方法用於比較兩個字符串，遵循下列規則

【1】如果字符串在字母表中應該排在字符串參數之前，則返回一個負數(大多數情況下為-1)

【2】如果字符串等於字符串參數，則返回0

【3】如果字符串在字母表中應該排在字符串參數之後，則返回一個正數(大多數情況下為1)

 var stringValue = 'yellow';console.log(stringValue.localeCompare('brick'));//1 'y'> 'b'console.log(stringValue.localeCompare('yellow'));//0 'yellow' == 'yellow'console.log(stringValue.localeCompare('zoo'));//-1 'yellow' < 'zoo'

[注意]雖然在字母表中大寫字母在小寫字母的前面，所以大寫字母< 小寫字母。但localeCompare()方法會考慮自然語言的排序情況，把'B'排在'a'的前面

console.log('B'.localeCompare('a'));//1console.log('B' > 'a');//falseconsole.log('b'.localeCompare('a'));//1console.log('b' > 'a');//true

以上所述是小編給大家介紹的Javascript類型系統之String字符串類型詳解的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！