vue (JavaScript) 文字列を操作するための一般的なメソッド

1.文字列の長さを取得する

JavaScript の文字列には length 属性があり、これを使用して文字列の長さを取得できます。

const str = 'hello';
str.length   // 输出结果：5

2. 文字列内の指定された位置の値を取得します

charAt() メソッドと charCodeAt() メソッドはどちらも、インデックスを介して指定された位置の値を取得できます。

• charAt() メソッドは、指定された位置にある文字を取得します。
• charCodeAt() メソッドは、指定された位置にある文字の Unicode 値を取得します。

（1）charAt()

charAt() メソッドは、指定された位置にある文字を返すことができます。その構文は次のとおりです。

string.charAt(index)

Index は文字列内の文字のインデックス値を表します。

const str = 'hello';
str.charAt(1)  // 输出结果：e 

文字列はインデックス値を通じて対応する文字を直接取得することもできますが、charAt() との違いは何でしょうか?

const str = 'hello';
str.charAt(1)  // 输出结果：e 
str[1]         // 输出结果：e 
str.charAt(5)  // 输出结果：'' 
str[5]         // 输出结果：undefined

Index の値が str の長さの範囲内にない場合、str[index] は未定義を返し、charAt(index) は空の文字列を返します。さらに、str[index] は ie6 と互換性がないことがわかります。 -ie8 、 charAt(index) は互換性があります。

（2）charCodeAt()

charCodeAt(): このメソッドは、指定されたインデックス位置にある文字の Unicode 値を返します。戻り値は、指定されたインデックスの UTF-16 コード単位を表す 0 ～ 65535 の整数です。指定された位置に文字がない場合は、  NaNが返されます。

let str = "abcdefg";
console.log(str.charCodeAt(1)); // "b" --> 98

3. 文字列に特定のシーケンスが含まれているかどうかを取得する

1）indexOf()

indexOf(): 特定の文字を検索し、見つかった場合は最初に一致した位置を返し、それ以外の場合は -1 が返されます。構文は次のとおりです。

string.indexOf(searchvalue,fromindex)

このメソッドには 2 つのパラメータがあります。

• searchvalue: 必須、取得する文字列値を指定します。
• fromindex: 検索を開始する文字列内の位置を指定するオプションの整数パラメータ。有効な値は 0 ～ string.length - 1 です。省略した場合は、文字列の先頭文字から検索します。

let str = "abcdefgabc";
console.log(str.indexOf("a"));   // 输出结果：0
console.log(str.indexOf("z"));   // 输出结果：-1
console.log(str.indexOf("c", 4)) // 输出结果：9

（2）lastIndexOf()

lastIndexOf(): 特定の文字を検索し、見つかった場合は最後に一致した位置を返し、それ以外の場合は -1 を返します。

let str = "abcabc";
console.log(str.lastIndexOf("a"));  // 输出结果：3
console.log(str.lastIndexOf("z"));  // 输出结果：-1

このメソッドは、検索順序が異なることを除いて、indexOf() と似ています。indexOf() は前方検索、lastIndexOf() は逆検索です。

（3）を含む（）

includes(): このメソッドは、文字列に指定された部分文字列が含まれているかどうかを判断するために使用されます。一致する文字列が見つかった場合は true を返し、それ以外の場合は false を返します。このメソッドの構文は次のとおりです

string.includes(searchvalue, start)

このメソッドには 2 つのパラメータがあります。

• searchvalue: 必須、検索する文字列。
• start: オプション。検索を開始する位置を設定します。デフォルトは 0 です。

let str = 'Hello world!';

str.includes('o')  // 输出结果：true
str.includes('z')  // 输出结果：false
str.includes('e', 2)  // 输出结果：false

（4）startsWith()

startsWith(): このメソッドは、文字列が指定された部分文字列で始まるかどうかを検出するために使用されます。指定された部分文字列で始まる場合は true を返し、それ以外の場合は false を返します。その構文は上記の include() メソッドと同じです。

let str = 'Hello world!';

str.startsWith('Hello') // 输出结果：true
str.startsWith('Helle') // 输出结果：false
str.startsWith('wo', 6) // 输出结果：true

（5）endsWith()

endsWith(): このメソッドは、現在の文字列が指定された部分文字列で終わるかどうかを判断するために使用されます。渡された部分文字列が検索文字列の末尾にある場合は true を返し、それ以外の場合は false を返します。その構文は次のとおりです。

string.endsWith(searchvalue, length)

このメソッドには 2 つのパラメータがあります。

• searchvalue: 必須、検索する部分文字列。
• length: 文字列の長さを設定します。デフォルト値は、元の文字列の長さ string.length です。

let str = 'Hello world!';

str.endsWith('!')       // 输出结果：true
str.endsWith('llo')     // 输出结果：false
str.endsWith('llo', 5)  // 输出结果：true

ご覧のとおり、2 番目のパラメータが 5 に設定されている場合、文字列の最初の 5 文字から取得されるため、true が返されます。

4. 複数の文字列を連結する

concat() メソッドは、2 つ以上の文字列を連結するために使用されます。このメソッドは元の文字列を変更しませんが、2 つ以上の文字列を連結した新しい文字列を返します。その構文は次のとおりです。

string.concat(string1, string2, ..., stringX)

パラメータ string1、string2、...、stringX は必須であり、これらは文字列の 1 つ以上の文字列オブジェクトに連結されます。

let str = "abc";
console.log(str.concat("efg"));          //输出结果："abcefg"
console.log(str.concat("efg","hijk")); //输出结果："abcefghijk"

5. 文字列を配列に分割する

Split() メソッドは、文字列を文字列の配列に分割するために使用されます。このメソッドは元の文字列を変更しません。その構文は次のとおりです。

string.split(separator,limit)

このメソッドには 2 つのパラメータがあります。

• 区切り文字: 必須。このパラメータで指定された位置で文字列を分割する文字列または正規表現。
• 制限: オプション。このパラメータは、返される配列の最大長を指定します。このパラメータが設定されている場合、このパラメータで指定された配列以外の部分文字列は返されません。このパラメータが設定されていない場合、文字列の長さに関係なく文字列全体が分割されます。

let str = "abcdef";
str.split("c");    // 输出结果：["ab", "def"]
str.split("", 4)   // 输出结果：['a', 'b', 'c', 'd'] 

空の文字列を区切り文字として使用すると、文字列内の各文字が分割されます。

str.split("");     // 输出结果：["a", "b", "c", "d", "e", "f"]

実際、文字列を配列に分割するときに、正規表現を使用して複数の区切り文字を同時に分割できます。

const list = "apples,bananas;cherries"
const fruits = list.split(/[,;]/)
console.log(fruits);  // 输出结果：["apples", "bananas", "cherries"]

6. インターセプト文字列

substr()、substring()、slice() メソッドはすべて、文字列をインターセプトするために使用できます。

（1）スライス()

lice() メソッドは、文字列の特定の部分を抽出し、抽出された部分を新しい文字列として返すために使用されます。その構文は次のとおりです。

string.slice(start,end)

このメソッドには 2 つのパラメータがあります。

• 開始: 必須。インターセプトされるフラグメントの開始インデックス。最初の文字位置は 0 です。負の数の場合は、最後から切り取られます。
• 終了: オプション。インターセプトされるセグメントの終わりのインデックス。このパラメータが指定されていない場合、抽出される部分文字列には、元の文字列の先頭から末尾までの文字列が含まれます。このパラメータが負の場合、文字列の末尾からの位置を指定します。

前述したように、start が負の数の場合、このパラメータは文字列の末尾から開始する位置を指定します。つまり、-1 は文字列の最後の文字を指し、-2 は最後から 2 番目の文字を指し、以下同様になります。

let str = "abcdefg";
str.slice(1,6);   // 输出结果："bcdef" 
str.slice(1);     // 输出结果："bcdefg" 
str.slice();      // 输出结果："abcdefg" 
str.slice(-2);    // 输出结果："fg"
str.slice(6, 1);  // 输出结果：""

このメソッドによって返される部分文字列には、先頭の文字は含まれますが、末尾の文字は含まれないことに注意してください。

（2）substr()

substr() メソッドは、文字列内の開始添え字から指定された数の文字を抽出するために使用されます。その構文は次のとおりです。

string.substr(start,length)

このメソッドには 2 つのパラメータがあります。

• 開始が必要です。抽出される部分文字列の開始インデックス。数値である必要があります。負の場合、このパラメータは文字列の末尾からの位置を宣言します。つまり、-1 は文字列の最後の文字を指し、-2 は最後から 2 番目の文字を指し、以下同様になります。
• 長さ: オプション。部分文字列内の文字数。数値である必要があります。このパラメータを省略した場合は、stringObject の先頭から末尾までの文字列が返されます。

let str = "abcdefg";
str.substr(1,6); // 输出结果："bcdefg" 
str.substr(1);   // 输出结果："bcdefg" 相当于截取[1,str.length-1]
str.substr();    // 输出结果："abcdefg" 相当于截取[0,str.length-1]
str.substr(-1);  // 输出结果："g"

（3） 部分文字列()

substring() メソッドは、文字列内の指定された 2 つの添え字の間の文字を抽出するために使用されます。その構文は次のとおりです。

string.substring(from, to)

このメソッドには 2 つのパラメータがあります。

• から: 必須。抽出する部分文字列の最初の文字の文字列内での位置を指定する非負の整数。
• to: オプション。文字列内で、抽出される部分文字列の最後の文字より 1 つ多い位置にある非負の整数。このパラメータを省略した場合、返される部分文字列は文字列の末尾に移動します。

注: from パラメータと to パラメータが等しい場合、このメソッドは空の文字列 (つまり、長さが 0 の文字列) を返します。from が to より大きい場合、メソッドは部分文字列を抽出する前に 2 つのパラメーターを交換します。また、このメソッドは負のパラメータを受け付けないため、パラメータが負の数値の場合は文字列が返されます。

let str = "abcdefg";
str.substring(1,6); // 输出结果："bcdef" [1,6)
str.substring(1);   // 输出结果："bcdefg" [1,str.length-1]
str.substring();    // 输出结果："abcdefg" [0,str.length-1]
str.substring(6,1); // 输出结果 "bcdef" [1,6)
str.substring(-1);  // 输出结果："abcdefg"

7. 文字列の大文字と小文字の変換

toLowerCase() メソッドと toUpperCase() メソッドは、文字列の大文字と小文字を変換するために使用できます。

（1）to小文字()

toLowerCase(): このメソッドは、文字列を小文字に変換するために使用されます。

let str = "adABDndj";
str.toLowerCase(); // 输出结果："adabdndj"

（2）toUpperCase()

toUpperCase(): このメソッドは、文字列を大文字に変換するために使用されます。

let str = "adABDndj";
str.toUpperCase(); // 输出结果："ADABDNDJ"

このメソッドを使用すると、文字列の最初の文字を大文字にできます。

let word = 'apple'
word = word[0].toUpperCase() + word.substr(1)
console.log(word) // 输出结果："Apple"

8. 文字列パターンマッチング

replace()、match()、および search() メソッドを使用して、文字の一致または置換を行うことができます。

（1）置き換え()

replace(): このメソッドは、文字列内の一部の文字を他の文字に置き換えたり、正規表現に一致する部分文字列を置き換えたりするために使用されます。その構文は次のとおりです。

string.replace(searchvalue, newvalue)

このメソッドには 2 つのパラメータがあります。

• 検索値: 必須。置換する部分文字列またはパターンを指定する RegExp オブジェクト。値が文字列の場合、最初に RegExp オブジェクトに変換されるのではなく、リテラル テキスト パターンとして取得されます。
• 新しい値: 必須。文字列値。テキストを置換する関数、または置換テキストを生成する関数を指定します。

let str = "abcdef";
str.replace("c", "z") // 输出结果：abzdef

大文字と小文字を区別せずにグローバル置換を実行します。

let str="Mr Blue has a blue house and a blue car";
str.replace(/blue/gi, "red");    // 输出结果：'Mr red has a red house and a red car'

注: 正規表現にグローバル フラグ g がある場合、replace() メソッドは一致するすべての部分文字列を置き換えます。それ以外の場合は、最初に一致した部分文字列のみが置換されます。

（2）一致()

match(): このメソッドは、文字列内の指定された値を取得するか、1 つ以上の正規表現の一致を見つけるために使用されます。このメソッドは、indexOf() および lastIndexOf() に似ていますが、文字列の位置ではなく、指定された値を返します。その構文は次のとおりです。

string.match(regexp)

メソッドの必須パラメータ regexp は、一致するパターンを指定する RegExp オブジェクトです。パラメーターが RegExp オブジェクトではない場合は、まずそれを RegExp コンストラクターに渡して RegExp オブジェクトに変換する必要があります。

注:このメソッドは、一致した結果を格納する配列を返します。この配列の内容は、regexp にグローバル フラグ g があるかどうかによって異なります。

let str = "abcdef";
console.log(str.match("c")) // ["c", index: 2, input: "abcdef", groups: undefined]

（3）検索()

search()文字列内の指定された部分文字列を取得するか、正規表現に一致する部分文字列を取得するために使用されるメソッド。その構文は次のとおりです。

string.search(searchvalue)

このメソッドのパラメータ regex は、文字列内で取得する必要がある部分文字列にすることも、取得する必要がある RegExp オブジェクトにすることもできます。

注:大文字と小文字を無視した検索を実行するには、フラグ i を追加します。このメソッドはグローバル マッチングを実行せず、フラグ g を無視します。つまり、最初に成功したマッチングの結果のみを返します。一致する部分文字列が見つからない場合は、-1 が返されます。

戻り値:正規表現に一致する str 内の最初の部分文字列の開始位置を返します。

let str = "abcdef";
str.search(/bcd/)   // 输出结果：1

9. 文字列から末尾の空白文字を削除する

trim()、trimStart()、trimEnd() の 3 つのメソッドを使用して、文字列の先頭と末尾にある先頭と末尾の空白文字を削除できます。空白文字には、スペース、タブ、改行、その他の空白文字が含まれます。

（1）トリム()

Trim() メソッドは、文字列から先頭と末尾の空白文字を削除するために使用されます。このメソッドは元の文字列を変更しません。

let str = "  abcdef  "
str.trim()    // 输出结果："abcdef"

10. 文字列を繰り返す

repeat() メソッドは新しい文字列を返します。これは、元の文字列を n 回繰り返すことを意味します。

'x'.repeat(3)     // 输出结果："xxx"
'hello'.repeat(2) // 输出结果："hellohello"
'na'.repeat(0)    // 输出结果：""

引数が小数の場合は切り捨てられます。

'na'.repeat(2.9) // 输出结果："nana"

パラメーターが負の数または無限大の場合、エラーが報告されます。

'na'.repeat(Infinity)   // RangeError
'na'.repeat(-1)         // RangeError

引数が 0 から -1 までの小数の場合、丸めが最初に実行されるため、0 と同等になります。0 から -1 までの小数は四捨五入後の -0 となり、繰り返しは 0 とみなされます。

'na'.repeat(-0.9)   // 输出结果：""

引数が NaN の場合、0 と同等です。

'na'.repeat(NaN)    // 输出结果：""

繰り返しのパラメータが文字列の場合、最初に数値に変換されます。

'na'.repeat('na')   // 输出结果：""
'na'.repeat('3')    // 输出结果："nanana"

上記は一般的に使用される文字列メソッドです。さらに追加してください。