js及ES6新增中的字符串屬性和方法

js中的字符串

字符串創建：

 

方法一：

    var str = s;                 //常量，基本類型創建

方法二：

    var str2 = new String(s);    //構造函數創建

參數:

參數 s 是要存儲在 String 對象中或轉換成原始字符串的值。

返回值:

當 String() 和運算符 new 一起作為構造函數使用時，它返回一個新創建的 String 對象，存放的是字符串 s 或 s 的字符串表示。

當不用 new 運算符調用 String() 時，它只把 s 轉換成原始的字符串，並返回轉換后的值。

 字符串的屬性：

    str.length        //字符串的長度

    str.constructor         //對創建該對象的函數的引用

    str.prototype            //允許您向對象添加屬性和方法

 

demo：

var  str="hello,world"

console.log(str[0]);

console.log(str[5]);

console.log(str.length);

字符串遍歷：

for（var i=0;i<str.length;i++){

console.log(str[i]);

}

字符串for-in遍歷：

for(var i in str){

 

console.log(str[i]);

 

}

字符串常見方法：

 1.indexOf(data,start);   //用於返回某個數組或者字符串中規定字符或者字符串的位置；

        var str = "abcdefg”;

        str.indexOf("a");    //0 返回當前查詢字符所在的位置的下標，如無，返回-1，start表示從第幾位開始查詢。

 

    2.charAt(index);         //返回指定位置的字符,index為下標

 

    3.substr(n,m);           //從起始索引號提取字符串中指定數目的字符。

 

    4.substring(n,m);        //返回從指定位置n，到結束位置（不含）m 的字符串，如果不指定結束位置，則從開始位置到結尾

 

    5.slice(n,m);            //同substring，需要注意和數組中方法slice()的相似

 

    6.split("-");            //通過指定字符分割字符串，返回一個數組

 

    7.replace("需要替換的字符串","替換之后的字符串")    //將字符串中的一些字符替換為另外一些字符。最好配合正則使用

 

更多方法請參考： http://www.w3school.com.cn/jsref/jsref_obj_string.asp

 

 

ES6新增：

 

1. 字符串重復 -- repeat（） 方法

 

作用：  返回一個新字符串，表示將原字符串重復n次。

 

var str = 'helloworld';

 

str.repeat( n );//該字符串就會重復n遍；

 

谷歌已經支持ES6的寫法；可以在控制台的console里直接使用 'helloworld'.repeat( n )；

 

如果repeat的參數是負數或者Infinity，會報錯。

 

如果repeat的參數是字符串，則會先轉換成數字。

 

2.字符串之 長度補全 

 

padStart()，padEnd()

padStart()用於頭部補全，padEnd()用於尾部補全。

'use strict';
// 'ababx'
console.log('x'.padStart(5, 'ab'))
// 'abax' 
console.log('x'.padStart(4, 'ab')) 
// 'xabab'
console.log('x'.padEnd(5, 'ab')) 
// 'xaba'
console.log('x'.padEnd(4, 'ab')) 

上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

如果原字符串的長度，等於或大於指定的最小長度，則返回原字符串。

'use strict';
// 'mfg'
console.log('mfg'.padStart(2, 'ab'))
// 'mfg'
console.log('mfg'.padEnd(2, 'ab')) 

padStart的常見用途是為數值補全指定位數。下面代碼生成 10 位的數值字符串。

'use strict';
// "0000000001"
console.log('1'.padStart(10, '0')) 
// "0000000012"
console.log('12'.padStart(10, '0')) 
// "0000123456"
console.log('123456'.padStart(10, '0')) 

另一個用途是提示字符串格式。

'use strict';
// "YYYY-MM-12"
console.log('12'.padStart(10, 'YYYY-MM-DD')) 
// "YYYY-09-12"
console.log('09-12'.padStart(10, 'YYYY-MM-DD') )

 

3.字符串 之   strim();

 

作用： 去除字符串兩端的空格；

 

我們經常在開發的時候使用字符串變量。

 

比如說： 

 

var user  = ’   userName''

 

happy new year  !  {{  user }} !

 

或者是

 

var name = "Bob  ", time = "today";

 

`Hello ${name}, how are you ${time}?`

 

這時候我們就可以使用tirm() 的方法替換；

 

4.字符串 之   raw（）方法。

 

作用：.raw方法，往往用來充當模板字符串的處理函數，返回一個斜杠都被轉義（即斜杠前面再加一個斜杠）的字符串，對應於替換變量后的模板字符串。

 

示例：

 

String.raw = function (strings, ...values) {

 

var output = "";

 

for (var index = 0; index < values.length; index++) {

 

output += strings.raw[index] + values[index];

 

}

 

output += strings.raw[index]

 

return output;

 

}

5.查找字符串

includes(), startsWith(), endsWith()
let str = 'abc'
str.includes('a') //是否包含，如果找到返回true，找不到返回false。也可以支持第二個參數，表示開始搜索的位置。
str.startsWith('a') //字符串開始位置是否包含，表示查找原字符串是否以給定的字符串開頭，開始的位置，返回Boolean，成功返回true，否則返回false。也可以支持第二個參數，表示開始搜索的位置
str.endsWith('c') //字符串結束位置是否包含。表示查找原字符串是否以給定的字符串結尾，返回Boolean類型，成功返回true，否則返回false。支持第二個參數，表示搜索前n個字符。是指從第n + 1個位置搜索前n個字符。

6.獲取字符編碼

charCodeAt（）

 

 

7.轉字符串為字符

formCharCode()

 

 

 

 

 

 

ES6對Unicode的支持

       在ES5中我們知道JavaScript 允許采用\uxxxx形式表示一個字符，其中xxxx表示字符的 Unicode 碼點。這種表示法只限於碼點在\u0000~\uFFFF之間的字符。超出這個范圍的字符，必須用兩個雙字節的形式表示，但是ES5卻無法正確的識別這個有兩個字節組成的字符。ES6中，JavaScript增加了對超出\u0000~\uFFFFUnicode范圍的字符支持。
       ES6的解決方法：將這種超過兩個字節的組成的單個字符的碼點放在一對花括號里面就可以正確的識別

1.codePointAt(index)方法
        JavaScript 內部，字符以 UTF-16 的格式儲存，每個字符固定為2個字節。對於那些需要4個字節儲存的字符（Unicode 碼點大於0xFFFF的字符）， JavaScript 會認為它們是兩個字符。這里解釋了為什么"𠮷"這個字符調用length屬性的時候，返回的長度是2了
       在ES5為我們提供的charCodeAt(index)方法只能分別返回"𠮷"前兩個字節和后兩個字節的值，而charAt(index)方法無法正常讀取這個字符(出現了亂碼)。ES6 提供了codePointAt(index)方法，能夠正確處理 4 個字節儲存的字符，返回一個字符的碼點。

 

值得注意的是：
        （1）codePointAt(index)方法識別大於兩個Unicode節點編碼的字符的時候，識別前兩個字節的時候會直接將這個四個字節的字符的碼值返回，識別后面的字節的碼值和charCodeAt(index)返回的結果一致
        （2）codePointAt方法會正確返回 32 位的 UTF-16 字符的碼點。對於那些兩個字節儲存的常規字符，它的返回結果與charCodeAt方法相同(這就導致了下面所說的那種情況)。
        （3）通過for......of  循環解決codePointAt(index)在傳入正確的位置索引的時候，返回的結果有偏差的問題-----原理就是for .......of 循環可以正確的識別 32 位的 UTF-16 字符

 

 

2.String.fromCodePoint(numX,numX,...,numX)方法(numX為Unicode值)
        ES5 提供String.fromCharCode(numX,numX,...,numX)方法，用於從碼點返回對應字符，但是這個方法不能識別 32 位的 UTF-16 字符（Unicode 編號大於0xFFFF）
        ES6 提供了String.fromCodePoint(numX,numX,...,numX)方法，可以識別大於0xFFFF的字符，彌補了String.fromCharCode方法的不足。在作用上，正好與codePointAt方法相反。
        值得注意的是：
        （1）String.fromCodePoint(numX,numX,...,numX)，當傳入多個Unicode值的時候，將會把結果合並成一個字符串返回
        （2）String.fromCodePoint(numX,numX,...,numX)是定義在String對象上的方法。而codePointAt(index)是定義在字符串實例上的方法，這一點要去區分

 demo:

// var str = "𠮲";

// console.log(str.charCodeAt(0));

// console.log(str.charCodeAt(1));

// console.log(String.fromCharCode(55362))

// console.log(String.fromCharCode("0xD8420xDFB2"))

// console.log(str.codePointAt())

// console.log(String.fromCharCode(134066))

 

// var str = "𠮲";

// console.log(str.codePointAt())

// console.log(String.fromCodePoint(134066))

// var str = "中";

// console.log(str.codePointAt())

// console.log(String.fromCodePoint(20013))

 

 

 

 

 

 

字符串的解構賦值

 

const [a, b, c, d, e] = 'hello';

 

a // "h"

 

b // "e"

 

c // "l"

 

d // "l"

 

e // "o"

 

這種解析方式，類似於數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

解構賦值：

字符的解構：按照順序一一對應，沒有對應，為undefined

// var str = "hi";

// var [a,b,c,d] = str;

// console.log(a)

// console.log(b)

// console.log(c)

// console.log(d)

 

 

 

字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。如：

const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" 

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值，如：

let {length : len} = 'hello'; len // 5