狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

JavaScript 中的字符串是一種基本的數據類型，用于表示文本數據。本文主要介紹了js字符串分割處理以及其它常用的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧！

語法：str.slice(start，end(不包含end元素))。

關于這個方法，使用時一定要搞懂五個關鍵點：

（1）截取字符串時不包括下標為end的元素。

（2）end是可選參數，沒有時，默認從start到結束的所有字符串。

（3）String.slice與Array.slice區別：字符串和數組都具有這個方法，它們的返回結果形式不一樣，一個是一段字符串，一個是一段淺復制后的數組。

（4）參數為負數時，將字符串的長度與對應的負數相加，結果作為參數。

（5）第一個參數比第二個參數大，結果返回空字符串。

const str = "hello world!"; // length = 12

console.log(str.slice(4, 9)); // o wor
console.log(str.slice(9)); // ld!
// 字符串長度是12，（12-6=6），所以slice（-6）從下標為6的字母開始
console.log(str.slice(-6)); // world! 
// slice（3，12-5）就是從下標3截取到下標7的字符串，得到"lo w"
console.log(str.slice(3, -5)); // lo w
// slice（-6+12=6，-2+12=10）,實際是slice(6，10)
console.log(str.slice(-6, -2)); // worl
console.log(str.slice(8, 2)); // ''空字符串

語法：str.substring(start，end(不包含end元素))。

關于這個方法，需要搞懂幾個關鍵點：

（1）返回的字符串中不包括 end 處的字符。

（2）參數為負數時或不是數字，直接將參數轉成0。

（3）如果參數 start 與 end 相等，那么該方法返回的就是一個空串，即長度為 0 的字符串。

（4）如果 start 比 end 大，那么該方法在提取子串之前會先交換這兩個參數。

const str = "hello world!"; // length = 12

console.log(str.substring(3,7)); //lo w
// 這個（7，3）會默認變成（3，7）將小的當起始位置來處理。
console.log(str.substring(7,3)); //lo w
// 負參數轉成0，相當于從下標0開始截取
console.log(str.substring(-3)); //hello world!
// 先交換位置，變成str.substring(-4，3)
// 在把負參數轉成0，結果相當于(str.substring(0,3))
console.log(str.substring(3,-4)); //hel  

語法：str.substr(start，length)。

關于這個方法，也需要搞懂幾個關鍵點： 

（1）表示從這個位置開始截取字符串(start從0開始)；如果是負數，則從末尾開始算起，-1 表示最后一個字符。

（2）length是表示截取的字符長度，必須是數值。可以沒有，如果省略，則截取從 start 到字符串結尾的所有字符。 

（3）最重要一點來自官網說明，如下所示：ECMAScript沒有對該方法進行標準化，因此反對使用它。

// 從下標為2的字符開始，截取6個長度的字符
console.log(str.substr(2,6)); // llo wo
// 從下標為3的字母開始到最后
console.log(str.substr(3)); // lo world!
// 從倒數第6個字符開始截取4個長度，substr(12-6,4)
console.log(str.substr(-6,4)); // worl
// // 從倒數第6個字符開始截取到最后
console.log(str.substr(-6)); // world!

由于substr() 的參數指定的是子串的開始位置和長度，因此它可以替代 substring() 和 slice() 來使用。

（1）都接收兩個參數，slice和substring接收的是起始位置和結束位置(注意：不包括結束位置)，而substr接收的則是起始位置和所要返回的字符串長度。 

（2）需要注意substring是以兩個參數中較小一個作為起始位置，較大的參數作為結束位置。 

（3）slice：將字符串的長度與對應的負數相加，結果作為參數。substr：只會將第一個參數與字符串長度相加后的結果作為第一個參數（第一個參數為負數）。substring：直接將負參數直接轉成0。

split() 方法用于把一個字符串分割成字符串數組。

語法：split（separator，howmany）。

需要記住兩個地方：1、separator可以是字符串或正則表達式。2、howmany可選參數，表示返回數組的最大長度。

const result = '|a|b|c|'.split(/\|/);
console.log(result);
//["", "a", "b", "c", ""]

const str = '0123456789';
console.log(str.split('', 5));
//["0", "1", "2", "3", "4"]

split方法把一個字符串string分割成片段創建一個字符串數組，可選參數howmany可以限制被分割的片段的數量。

語法：string.charAt(index)。

返回指定位置（如上index）的字符，如果index小于0或者大于等于字符串的長度string.length，它會返回空字符串。

const str = "hello world!"; // length = 12

console.log(str.charAt(0));//h
console.log(str.charAt(8));//r
console.log(str.charAt(-2));//""
console.log(str.charAt(13));//""

charAt其實可以像下面這樣實現：

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};
String.method('myCharAt', function (index) {
    return this.slice(index, index + 1);
});

const str = "hello world!"; // length = 12
console.log(str.myCharAt(1)) // e

用于連接兩個或者多個字符串。相較于數組Array.concat()。其實字符串倒是用的不多，主要是之前使用加號（+）會更方便一些，字符串模板語法一步優化了字符串拼接的操作。

const str = "a".concat("b","c","d","e");
console.log(str); // abcde

（1）match方法

參數為普通字符串的使用方式，此時match方法的返回值是存放首次匹配內容的數組。如果沒有找到匹配結果，返回null。 

語法：str.match(searchvalue)。searchvalue：必需，規定方法要檢索的字符串。

const str = "hello world!"; // length = 12

console.log(str.match("l"));
// ["l", index: 2, input: "hello world!", groups: undefined]

對上述代碼運行結果分析如下： 

（1）match方法在有匹配結果的時候返回值是一個數組。 

（2）數組第一個元素是match方法首次匹配到的子字符串，"hello world!"雖然有多個"l"，但是返回的數組只存儲首次匹配到的"l"，如果match方法的參數是全局匹配的正則，將會存儲所有的匹配到的子字符串。 

（3）index屬性值返回首次匹配到字符串的索引位置。 

（4）input屬性值是原字符串"hello world!"。 

（5）groups屬性當前并不被支持，暫時不做介紹。

const str = "hello world!"; // length = 12

console.log(str.match('wor'));
// ["wor", index: 6, input: "hello world!", groups: undefined]

（1）首次匹配到子字符的位置，以子字符串的首字符在原字符串位置為準。

（2）字符串與數組類似，字符位置從0開始計算，也就是第一個字符的位置為0，第二個位置為1，以此類推。

const str = "hello world!"; // length = 12
console.log(str.match("123"));//null

如果匹配不到任何內容，方法返回值為null。

（2）正則表達式 match()

match方法可在字符串內查找一個或多個與指定正則表達式匹配的子字符串。 方法的返回值是存放著匹配結果的數組，但數組元素并不一定全都是匹配結果。 

語法結構：stringObject.match([string] | [RegExp]) 。

參數解析： 

（1）stringObject：從中查找子字符串的源字符串。 

（2）reg：正則表達式對象或者正則表達式直接量。

// 1.不使用全局匹配 
const text = 'Today is the 227th day of 2024,I must finish these 2 projects within 21 days.';
//只能匹配字符串中出現的首個數字，未使用全局匹配符g
const result = text.match(/\d+/); 
console.log(result);

這個例子的結果是沒有使用全局匹配的正則表達式的匹配結果。說白了，就是正則表達式的末尾沒跟g。由于不適用全局匹配，所以match()方法只找到源字符串中首次匹配的子串后，就立刻得到返回結果，不再比較之后剩余的部分是否還有能匹配上的內容。

我們可以看到，match()的結果是一個數組，該數組一共有5項。各項代表的意思如下：第0項：匹配到字符串；第1項：groups：undefined，這表示當前的正則表達式沒使用分組；第2項：index表示首次匹配上的子串的起始下標；第3項：input，表示源字符串；第4項：length，表示匹配到的結果個數，由于這里不使用全局匹配，只找到首次匹配項就結束了，所以匹配結果只有1個，length也就是1。　

如果想匹配所有的符合條件的子串，就必須在正則的末尾添加全局匹配符g。

// 2.使用全局匹配
//匹配所有的數字，使用了全局匹配符g
const text = 'Today is the 227th day of 2024,I must finish these 2 projects within 21 days.';
const result = text.match(/\d+/g); 
console.log(result);
//  ['227', '2024', '2', '21']

這個例子在正則表達式的末尾添加了g，該正則表達式的意圖是，在字符串text中匹配出所有的由數字組成的子符串。

// 3.使用分組,且不使用全局匹配g
const text = 'Today is the 227th day of 2024, the 168th Thanksgiving Day.';
//匹配str中首個以數字開頭，并且以th結尾的子串
const result = text.match(/\d+(th)/); 
console.log(result);

由于該正則表達式為：/\d+(th)/，該表達式中使用了小括號()，在此處的作用為分組。所以match()的結果是帶有分組特征的。返回的數組包含多個元素，第一個元素是以貪婪模式找到的最長的匹配，之后的元素依次為該匹配中的第一、第二、第三 ......個分組，這里只有1個分組，所以也就只匹配到1個分組結果，也就是”th"。

假如正則表達式改成：/\d+(t)(h)/，那么匹配到的項就有3個，分別是 ：'227th' 、 't' 、'h'。

// 4.使用分組，同時使用全局匹配g
//匹配str中所有的以數字開頭，并且以th結尾的子串
const result = text.match(/\d+(th)/g); 
console.log(result);
//  ["286th", "108th"]

此例和上面的例子區別只有一點，就是正則表達式末尾多了個g，表示全局匹配。當正則中使用全局匹配符g，即使有分組的存在，在匹配結果中也只有匹配到的最長的，那些分組的子匹配都不見了。

str.replace(searchValue，replaceValue)。

作用：replace方法對string進行查找和替換操作，并返回一個新的字符串。 

取值：參數searchValue可以是一個字符串或者一個正則表達式對象。

（1）第一種情況：如果searchValue是一個字符串，那么searchValue只會在第1次出現的地方被替換。

const str = 'abcdefgabcdabcd'.replace('ab','12');
console.log(str); // '12cdefgabcdabcd'

上面這例子就證明searchValue是一個字符串時，只會在第1次出現的地方被替換。

（2）第二種情況：如果searchValue是一個正則表達式并且帶有g標識，它會替換所有的匹配。如果沒有帶g標識，它會僅替換第1個匹配。

const text = "aaa bbb ccc";
const n1 = text.replace(/\b\w+\b/, word => {
    return word.substring(0,1).toUpperCase() + word.substring(1)
})
console.log(n1);//Aaa bbb ccc

const n2 = text.replace(/\b\w+\b/g, word => {
    return word.substring(0,1).toUpperCase() + word.substring(1)
})
console.log(n2);//Aaa Bbb Ccc

首先，定義了一個name具有三段字符的字符串。其次，serchValue定義了一個正則表達式，其意義是：\b：匹配單詞邊界，準確的說是表達獨立部分，可以是起始，結束，空格。\w+：表示多個字符組合( 字母 ，數字，下劃線_ )。最后，如果不加g的話，只匹配第一串字符，加了之后所有的都匹配了。

（3）第三種情況：replaceValue可以是一個字符串或一個函數，如果replaceValue是一個字符串，字符$擁有特殊的含義。

const text = '"a","b","c"';
const result = text.replace(/"([^"]*)"/g , "'$1'");
console.log(result)  //'a','b','c'

/[^"]/ 和 /^["]/是不一樣的，前者是排除的意思，后者是代表首位。

$1就代表前面searchValue正則所匹配的每一項內容。

$number表示分組捕獲的文本，即與regexp中的第number個子表達式相匹配的文本，后面這一句話比較是關鍵。

const date = '2024-8-19';
const reg = /(\d+)(-)/g;
const d = date.replace(reg,($0,$1,$2) => {
    // console.log($0,$1,$2);
    // $0      $1     $2
    // 2018-   2018   -
    // 8-      8      -
    return $1+'.';
})
console.log(d); //2024.8.19

$0：匹配成功后的整體結果（2024-，8-）。

$1：匹配成功后的第一個分組，這個例子中指的是\d（2024，8）。

$2：匹配成功后的第二個分組，這個例子中指的是-（- -）。

str.search(regexp)，search方法其實和indexOf方法有點類似。它只接受一個正則表達式對象作為參數而不是一個字符串。 如果找到匹配，它返回第1個匹配的音字符位置，如果沒有找到匹配，則返回-1。 這個方法會忽略g標識，且沒有position參數。

const text = 'hello world! HTML';
const t1 = text.search(/!/);
console.log(t1); // 11

const t2 = text.search(/a/);
console.log(t2); // -1

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

str.startsWith(searchString[, position])。

searchString表示要搜索的子字符串。 

position可選，在 str 中搜索 searchString 的開始位置，默認值為 0。

const text = 'hello world! HTML';
console.log(text.startsWith("he")); // true
console.log(text.startsWith("ab")); // false
console.log(text.startsWith("wo", 6)); // true

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

str.endsWith(searchString[, length])。

searchString 要搜索的子字符串。

length可選，作為 str 的長度。默認值為 str.length。

const text = 'hello world! HTML';
console.log(text.endsWith("HTML"));  // true
console.log(text.endsWith("he"));      // false
console.log(text.endsWith("ld", 11));  // true

String.fromCharCode(char...)，可接受一個指定的Unicode值，然后返回一個字符串。

const c1 = String.fromCharCode(36);
console.log(c1);//$

const c2 = String.fromCharCode(80);
console.log(c2);//P

const c3 = String.fromCharCode(100);
console.log(c3);//d

const c4 = String.fromCharCode(36,80,100);
console.log(c4);//$Pd

localeCompare方法是JavaScript中比較字符串時常用的方法之一，其主要功能是根據指定的語言環境比較兩個字符串的大小關系，可以用于排序、查找等操作。通常用于排序字符串數組或表格中的行。

語法格式是：string.localeCompare(target)。

• target：要進行比較的字符串。

• locales（可選）：指定語言環境，格式為字符串或數組。

• options（可選）：一個對象，包含以下屬性：

• sensitivity：比較時使用的大小寫敏感度，默認值為“base”，還可以設置為“accent”或“case”等。

• ignorePunctuation：是否忽略標點符號，默認為false。

• numeric：是否將數字視為數字進行比較，默認為false。

如果string排在target之前，則返回小于0的數；如果string排在target之后，則返回大于0的數；如果兩個字符串相等，則返回0。

const str="pink"; 
console.log(str.localeCompare("blue"));//1 
console.log(str.localeCompare("pink"));//0 
console.log(str.localeCompare("red"));//-1 

• localeCompare() 方法是大小寫敏感的。例如，"a" 和 "A" 是不同的字符。

• localeCompare() 方法也是重音符號敏感的。例如，"é" 和 "è" 是不同的字符。

• localeCompare() 方法的默認區域設置是當前系統的區域設置。

• localeCompare() 方法返回的數字取決于本地排序規則。不同的語言和不同的區域設置可能會有不同的排序規則。

• localeCompare() 方法不會更改原始字符串。它只是返回一個數字。

本篇文章就先總結這幾個開發中常用的字符串方法。操作字符串的值是一般的開發人員必須面臨的家常便飯，操作字符串的具體方式有很多，掌握它們對于進行高效的文本處理非常重要。