String筆記

愛coding的小黑發表於2019-02-16
筆記

前言

上一篇做了一下陣列的總結，在總結的過程中重新鞏固了對陣列的方法的使用，很多以前沒記住的細節也一一撿了起來，這一篇Sring筆記也是為了重新複習下String的相關定義和用法。

String

1 JavaScript的原生物件String
關於String作為原生物件和建構函式的區別，上一篇陣列有過詳細的解析。這裡就直接開始分析這兩種情況下的String的使用。

1-2 屬性和方法使用

1-2-1 length屬性返回String物件的長度。

這裡的length屬性只是String本身的length屬性，其值為1。

1-2-2 name屬性返回String物件名稱。

與length屬性一樣，其值為”String”。

1-2-3 fromCharCode() 方法返回使用指定的Unicode值序列建立的字串。

引數1：要轉換的資料

String.fromCharCode(98,99,100);
// "bcd"

注意：作用於高位編碼，返回簡單的高位編碼的字串，例如阿拉伯數字等等。

1-2-4 fromCodePoint() 靜態方法返回使用指定的程式碼點序列建立的字串。

引數1：要轉換的資料

String.fromCodePoint(0x2F804);
// "你"
String.fromCharCode(0x2F804);
// ""

注意：String.fromCodePoint()是ES6的新方法，被用來返回一對低位編碼，從而可以完全表示這些高位編碼字元。

2 作為函式呼叫

2-1 規範

字串可以通過3個方式建立，字面量方式，String方法轉化，以及String建構函式建立。

let str = "12";
let str2 = String("13");
console.log(typeof(str));
console.log(typeof(str2));
str.__proto__ === String.prototype;
str2.__proto__ === String.prototype;
// string
// string
// true
// true

let str1 = new String("12");
console.log(typeof(str1));
str1.__proto__ === String.prototype;
// object
// true

1、字面量方式建立的字串和String方法轉化的都是基本字串。這些基本字串沒有屬性和方法。而通過String建構函式建立的例項物件都是字串物件，它繼承String原型的上的屬性和方法。
2、當基本字串需要呼叫一個字串物件才有的方法或者查詢值的時候(基本字串是沒有這些方法的)，JavaScript 會自動將基本字串轉化為字串物件並且呼叫相應的方法或者執行查詢。

2-2 引數

“value”
任何可以被轉換成字串的值。

2-3 例項方法

ES5原有方法 String.prototype.

2-3-1 charAt()

方法從一個字串中返回指定索引的字元。

1個引數：

  • index 字串的索引，取值為整數。(0 ~ length-1)；
    1、傳入非數字或者不傳則預設取索引為0的字元。
    2、傳入的數值大於取值範圍(0 ~ length-1)，返回空字串。
let str = "123";
console.log(str.charAt(0));
console.log(str.charAt(1));
console.log(str.charAt(2));
console.log(str.charAt());
console.log(str.charAt("0"));
console.log(str.charAt(5));
// 列印結果
1
2
3
1
1
""

2-3-2 concat()

方法將一個或多個字串與原字串連線合並，形成一個新的字串並返回。

多個引數：

  • string1， string2… 和原字串連線的多個字串。
    1、返回新的字串，不影響原來的字串。
let str1 = "hello";
let str2 = "world";
let str3 = str1 + str2;
let str4 = str1.concat(str2);
console.log(str1);
console.log(str3);
console.log(str4);
let str5 = `${str1}：${str2}`
console.log(str5);

// 列印結果
"hello"
"helloworld"
"helloworld"
"hello：world"

1、效能上字串拼接效能高於使用concat方法。
2、ES6的模板字串拼接方便與其他未宣告的字串拼接。

2-3-3 indexOf()

方法返回撥用String物件中第一次出現的指定值的索引，如果未找到該值，則返回-1。

2個引數：

  • string
    指定查詢的字串。
  • index
    表示呼叫該方法的字串中開始查詢的位置，取值為整數，預設值為0。

分兩種情況

  1. 查詢的值是非空字串

    • index < 0 與傳入預設值0返回結果一致。
    • 如果 index >= str.length，則該方法返回 -1。

  2. 查詢的值是空字串

    • index <= 0 時返回0。
    • 0 < index <= str.length時返回index的值。
    • index > str.length時返回str.length。
let str = "this is a question";
let findStr = "question";
let emptyStr = "";
console.log(str.indexOf(findStr));
console.log(str.indexOf(findStr, -1));
console.log(str.indexOf(findStr, 20));
console.log(str.indexOf("answer"));

console.log(str.indexOf(emptyStr, -1));
console.log(str.indexOf(emptyStr, 15));
console.log(str.indexOf(emptyStr, 20));
// 列印結果
10
10
-1
-1
0
15
18

2-3-4 lastIndexOf()

方法返回指定值在呼叫該方法的字串中最後出現的位置，如果沒找到則返回 -1。從該字串的後面向前查詢，從 index 處開始。

  • string
    指定查詢的字串。
  • index
    表示呼叫該方法的字串中開始查詢的位置，取值為整數，預設值為str.length。

分兩種情況

  1. 查詢的值是非空字串

    • index < 0 則index = 0。
    • 如果 index > str.length，則index = str.length。

  2. 查詢的值是空字串

    • index <= 0 時返回0。
    • 0 < index <= str.length時返回index的值。
    • index > str.length時返回str.length。
let str = "this is a question";
let findStr = "question";
let emptyStr = "";
console.log(str.lastIndexOf(findStr));
console.log(str.lastIndexOf(findStr, 20));
console.log(str.lastIndexOf(findStr, -1));
console.log(str.lastIndexOf("answer"));

console.log(str.lastIndexOf(emptyStr, -1));
console.log(str.lastIndexOf(emptyStr, 15));
console.log(str.lastIndexOf(emptyStr, 20));
// 列印結果
10
10
-1
-1
0
15
18

2-3-5 slice()

方法提取一個字串的一部分，並返回一新的字串。提取的新字串包括beginIndex但不包括endIndex。

2個引數：

  • beginIndex

    1. 開始提取字串的索引位置，取值為整數。
    2. 如果為負數，則beginIndex = str.length + beginIndex;
    3. 如果省略該引數，beginIndex = 0。

  • endIndex

    1. 結束提取字串的索引位置，取值為整數。
    2. 如果endIndex < 0，則endIndex= str.length + endIndex;
    3. 如果endIndex > str.length – 1，slice會一直提取到字串末尾。
    4. 如果省略該引數，slice會一直提取到字串末尾。
let str = "xiaohei like play basketball";
console.log(str.slice());
console.log(str.slice(0, 50));
console.log(str.slice(-3));
console.log(str.slice(0, -9));
// 列印結果
"xiaohei like play basketball"
"xiaohei like play basketball"
"all"
"xiaohei like play b"

2-3-6 split()

方法使用指定的分隔符字串將一個String物件分割成字串陣列，以將字串分隔為子字串，以確定每個拆分的位置。不改變原有字串。

2個引數：

  • separator

    1. 指定表示每個拆分應發生的點的字串。
    2. 如果省略，會返回有含有整個字串元素的陣列;
    3. 如果分隔符為空字串，則將str原字串中每個字元的陣列形式返回。

  • limitNumber

    1. 指定分割後返回陣列的元素個數，取值為整數。
    2. 如果limitNumber< 0，則返回全部被分割的元素組成的陣列;
    3. 如果limitNumber大於當前被分割的元素個數，則返回全部被分割的元素組成的陣列。
    4. 如果limitNumber小於當前被分割的元素個數，則返回limitNumber個數的元素組成的陣列。
    5. 如果省略該引數，則返回全部被分割的元素組成的陣列。
let str = "asd,12,2,321,21"
console.log(str.split(",", 0));
console.log(str.split(",", -1));
console.log(str.split(","));
console.log(str.split(",", 3));
console.log(str.split(",", 6));

let str1 = "today is sunday";
console.log(str1.split());
console.log(str1.split(""));

//列印結果
[]
["asd", "12", "2", "321", "21"]
["asd", "12", "2", "321", "21"]
["asd", "12", "2"]
["asd", "12", "2", "321", "21"]

["today is sunday"]
["t", "o", "d", "a", "y", " ", "i", "s", " ", "s", "u", "n", "d", "a", "y"]

2-3-7 substring()

方法返回一個字串在開始索引到結束索引之間字串。不改變原有字串。

2個引數：

  • startIndex

    1. 擷取字串開始的索引，為一個整數。
    2. startIndex = endIndex，返回一個空字串。
    3. startIndex > endIndex 則 startIndex = endIndex 而 endIndex = startIndex。
    4. startIndex < 0 或者 startIndex = NaN, 則startIndex = 0。
    5. startIndex > str.length – 1 則 startIndex = str.length – 1。

  • endIndex

    1. 擷取字串結束的索引，為一個整數。
    2. endIndex < 0 或者 endIndex= NaN, 則 endIndex= 0。
    3. endIndex > str.length – 1 則 endIndex= str.length – 1。
let str = "qwertydf";
console.log(str.substring());
console.log(str.substring(1, 1));
console.log(str.substring(-1, 3));
console.log(str.substring(-1, 20));
console.log(str.substring(6, 0));

// 列印結果
"qwertydf"
""
"qwe"
"qwertydf"
"qwerty"

2-3-8 toUpperCase()，toLocaleUpperCase()

toUpperCase()

將呼叫該方法的字串值轉換為大寫形式，並返回。

toLocaleUpperCase()

使用本地化（locale-specific）的大小寫對映規則將輸入的字串轉化成大寫形式並返回結果字串。

兩個方法絕大多數情況下返回結果一致，對於一些特殊的語言會返回不同，（日常使用中沒啥區別）。都不會改變原來字串。

let str = "helloworld, HI";
str.toLocaleUpperCase(); // HELLOWORLD, HI
str.toUpperCase(); // HELLOWORLD, HI

2-3-9 toLowerCase()，toLocaleLowerCase()

toLowerCase()

將呼叫該方法的字串值轉換為小寫形式，並返回。

toLocaleLowerCase()

使用本地化（locale-specific）的大小寫對映規則將輸入的字串轉化成小寫形式並返回結果字串。

兩個方法絕大多數情況下返回結果一致，對於一些特殊的語言會返回不同，（日常使用中沒啥區別）。都不會改變原來字串。

let str = "helloworld, HI";
str.toLocaleLowerCase(); // helloworld, hi
str.toLowerCase(); // helloworld, hi

2-3-10 valueOf()，toString()

valueOf()

字串或者字串物件呼叫該方法返回的該字串的基本字串格式。

toString()

與valueOf使用方法一致。

上文中提到了字串的兩個基本格式，基本字串和字串物件，而基本字串在使用例項方法時，javascript會把它轉化成字串物件後再呼叫方法。所以無論是基本字串還是字串物件呼叫這兩個方法，本質上是沒有區別的。valueOf() 方法通常在 JavaScript 內部被呼叫，而不是在程式碼裡顯示呼叫。

let baseStr = "baseString";
let objStr = new String("objectString");
console.log(baseStr.toString());
console.log(objStr);
console.log(objStr.valueOf());

// 列印結果
"baseString"
String {0: "o", 1: "b", 2: "j", 3: "e", 4: "c", 5: "t", 6: "S", 7: "t", 8: "r", 9: "i", 10: "n", 11: "g"}
"objectString"

2-3-11 trim()

方法會從一個字串的兩端刪除空白字元。方法並不影響原字串本身。

let str = "  test  ";
console.log(str.trim()); // test
console.log(str); // "  test  "

ES6新增方法 String.prototype.

2-3-12 includes()

方法用於判斷一個字串是否包含在另一個字串中，根據情況返回 true 或 false。

2個引數：

  • string
    指定查詢的字串。

  • index

    1. 開始查詢的位置，取值為整數。
    2. 取值不正確或不填預設從0開始。
let str = "hello world";
let str1 = "world";
console.log(str.includes(str, 0));
console.log(str.includes(str1, 6));
console.log(str.includes(str1, 20));
console.log(str.includes(str1, "ads"));
// 列印結果
true
true
false
true

2-3-13 startWith()

方法用來判斷當前字串是否是以另外一個給定的子字串“開頭”的，根據判斷結果返回 true 或 false。

2個引數：

  • string
    指定查詢的字串。

  • index

    1. 開始查詢的位置，取值為整數。
    2. 取值不正確或不填預設從0開始。
let str = "object is not found";
console.log(str.startsWith("object", 1));
console.log(str.startsWith("object"));
console.log(str.startsWith("object", "sadas"));
// 列印結果
false
true
true

2-3-13 endWith()

方法用來判斷當前字串是否是以另外一個給定的子字串“結尾”的，根據判斷結果返回 true 或 false。

2個引數：

  • string
    指定查詢的字串。

  • index

    1. 開始查詢的位置，取值為整數。
    2. 取值不正確或者不填預設字串末尾是否已要查詢的字串結尾。
    3. 如果傳值正確，則表示從str.length – index處往前的字串是否以要查詢的字串結尾。
let str = "object,String";
console.log(str.endsWith("object")); // false
console.log(str.endsWith("String")); // true

// 從str.length - index往前的字串
// 從7索引位置開始前面的字串是否包含object
console.log(str.endsWith("object", 6)); // true

// 從6索引位置開始前面的字串是否包含object
console.log(str.endsWith("object", 7)); // false

2-3-13 padStart()， padEnd()

方法用來在字串頭部/尾部補全不夠指定長度的字串，返回新的字串，不改變原來字串。

2個引數：

  • length

    1. 補全字串的長度，取值為整數。
    2. 如果原字串長度大於補全長度，則返回原字串。

  • string

    1. 用來補全的字串。
    2. 如果不填則以空字串補全。
    3. 如果補全的字串長度與原字串長度相加大於了補全長度引數，則會擷取大於補全長度的多餘的補全字串。
let str = "1";
console.log(str.padStart(3));
console.log(str.padEnd(3));
console.log(str.padStart(3, "2"));
console.log(str.padEnd(3, "2"));

let str1 = "abcdefg";
console.log(str1.padStart(10, "hijklm"));
console.log(str1.padEnd(10, "hijklm"));

let str2 = "09-12"
console.log(str2.padStart(10, "YYYY-MM-DD"));

let str3 = "abc";
console.log(str3.padStart(2));
console.log(str3.padEnd(2, "2222"));

// 列印結果
"  1"
"1  "
"221"
"122"

"hijabcdefg"
"abcdefghij"
"YYYY-09-12"

"abc"
"abc"

2-3-13 repeat()

方法用來把原字串重複n次，返回新字串。

2個引數：

  • number

    1. 指定重複的次數，取值為整數。
    2. 取值為0表示重複0次，返回空字串。
    3. 取值為NaN或者(-1,0]則number = 0。
    4. 字串轉化成數字。
    5. 小於等於負一的數或者無限數都會報錯。
    6. 小數直接取整。
let str = "a";
console.log(str.repeat(0));
console.log(str.repeat(2));
console.log(str.repeat(2.9));

console.log(str.repeat("asd"));
console.log(str.repeat(-0.9));

console.log(str.repeat("2"));

console.log(str.repeat(-1));
console.log(str.repeat(Infinity));
// 列印結果
""
"aa"
"aa"

""
""

"aaa"

"Uncaught RangeError: Invalid count value"
"Uncaught RangeError: Invalid count value"

由於正則這塊忘得差不多了，所以String與正則相關的方法會在後續完成正則的複習後再加上

相關文章