一般的な JavaScript 文字列メソッド 28 個と使用方法のヒントのまとめ

序文

今日は JavaScript の基本をいくつか見てみましょう。基本はとても重要です。今年の春の採用の時、大手企業の面接官にJavaScript APIを覚えられないとバカにされたのを今でも鮮明に覚えています🤣 すごく恥ずかしかったです。あまりに少なすぎることが主な原因だったので、まだまだ日常生活の中でもっと使って蓄積していく必要があります。今日は、JavaScript でよく使われる文字列メソッドをいくつか見ていきます。記事にはたくさんの内容が含まれているので、勉強する前に集めておくことをお勧めします！

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

JavaScript の文字列には、文字列の長さを取得するために使用できる length プロパティがあります。
'hello' を定数 str に代入します。
str.length // 出力: 5

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

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

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

(1) charAt()

charAt() メソッドは、指定された位置の文字を返します。構文は次のとおりです。

文字列.charAt(インデックス)

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

'hello' を定数 str に代入します。
str.charAt(1) // 出力: e 

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

'hello' を定数 str に代入します。
str.charAt(1) // 出力: e 
str[1] // 出力: e 
str.charAt(5) // 出力: '' 
str[5] // 出力: 未定義

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

(2) charCodeAt()

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

str = "abcdefg"とします。
console.log(str.charCodeAt(1)); // "b" --> 98

このメソッドを使用すると、文字列内の指定された Unicode エンコード値の範囲の文字を取得できます。たとえば、0 から 9 までの数字の Unicode エンコード範囲は 48 から 57 です。この方法を使用して、文字列内の数字をフィルター処理できます。もちろん、正規表現に慣れている場合は、より便利です。

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

これら 5 つのメソッドを使用して、文字列に特定のシーケンスが含まれているかどうかを取得できます。最初の 2 つのメソッドは、指定された要素のインデックス値を取得し、最初に一致した値の位置のみを返します。最後の 3 つのメソッドは、指定された値が一致するかどうかを示すブール値を返します。

注意: これら 5 つの方法では大文字と小文字が区別されます。

(1) インデックス()

indexOf(): 文字を検索し、見つかった場合は最初の一致位置を返し、見つからない場合は -1 を返します。構文は次のとおりです。

string.indexOf(検索値、インデックスから)

このメソッドは 2 つのパラメータを取ります。

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

str = "abcdefgabc"とします。
console.log(str.indexOf("a")); // 出力: 0
console.log(str.indexOf("z")); // 出力: -1
console.log(str.indexOf("c", 4)) // 出力: 9

(2) 最後のインデックス()

lastIndexOf(): 文字を検索し、最後に一致した場合はその位置を返し、そうでない場合は -1 を返します。

str = "abcabc"とします。
console.log(str.lastIndexOf("a")); // 出力: 3
console.log(str.lastIndexOf("z")); // 出力: -1

このメソッドは indexOf() に似ていますが、検索順序が異なります。indexOf() は正の順序で検索しますが、lastIndexOf() は逆の順序で検索します。

（３）は（）を含む

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

文字列.includes(検索値、開始)

このメソッドは 2 つのパラメータを取ります。

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

str = 'Hello world!' とします。

str.includes('o') // 出力: true
str.includes('z') // 出力: false
str.includes('e', 2) // 出力: false

(4) 開始()

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

str = 'Hello world!' とします。

str.startsWith('Hello') // 出力: true
str.startsWith('Helle') // 出力: false
str.startsWith('wo', 6) // 出力: true

(5) 終了()

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

string.endsWith(検索値、長さ)

このメソッドは 2 つのパラメータを取ります。

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

str = 'Hello world!' とします。

str.endsWith('!') // 出力: true
str.endsWith('llo') // 出力: false
str.endsWith('llo', 5) // 出力: true

ご覧のとおり、2 番目のパラメータを 5 に設定すると、文字列の最初の 5 文字から検索が実行されるため、true が返されます。

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

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

文字列.concat(文字列1, 文字列2, ..., 文字列X)

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

str = "abc"とします。
console.log(str.concat("efg")); //出力: "abcefg"
console.log(str.concat("efg","hijk")); //出力: "abcefghijk"

concat() メソッドは文字列を連結するために特に使用されますが、より単純なため、開発では加算演算子 + が最もよく使用されます。

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

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

文字列.split(区切り文字,制限)

このメソッドは 2 つのパラメータを取ります。

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

str = "abcdef"とします。
str.split("c"); // 出力: ["ab", "def"]
str.split("", 4) // 出力: ['a', 'b', 'c', 'd'] 

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

str.split(""); // 出力: ["a", "b", "c", "d", "e", "f"]

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

const list = "リンゴ、バナナ、チェリー"
const フルーツ = リスト.split(/[,;]/)
console.log(fruits); // 出力: ["apples", "bananas", "cherries"]

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

substr()、substring()、slice() メソッドはすべて文字列の抽出に使用できます。

(1) スライス()

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

文字列.スライス(開始,終了)

このメソッドは 2 つのパラメータを取ります。

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

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

str = "abcdef"とします。
str.slice(1,6); // 出力: "bcdef" 
str.slice(1); // 出力: "bcdefg" 
str.slice(); // 出力: "abcdefg" 
str.slice(-2); // 出力: "fg"
str.slice(6, 1); // 出力: ""

このメソッドは、開始文字を含む部分文字列を返しますが、終了文字は返さないことに注意してください。

(2) サブストラクチャ()

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

文字列.substr(開始,長さ)

このメソッドは 2 つのパラメータを取ります。

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

str = "abcdef"とします。
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 つの添え字間の文字列から文字を抽出するために使用されます。構文は次のとおりです。

文字列.部分文字列(開始位置、終了位置)

このメソッドは 2 つのパラメータを取ります。

• from: 必須。抽出する部分文字列の最初の文字の文字列内の位置を指定する負でない整数。
• to: オプション。抽出する部分文字列の最後の文字の文字列内の位置より 1 大きい非負の整数。このパラメータを省略すると、返される部分文字列は文字列の末尾で終了します。

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

str = "abcdef"とします。
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) 小文字に変換()

toLowerCase(): このメソッドは文字列を小文字に変換するために使用されます。
str = "adABDndj"とします。
str.toLowerCase(); // 出力: "adabdndj"

(2) 大文字に変換()

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

str = "adABDndj"とします。
str.toUpperCase(); // 出力: "ADABDNDJ"

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

単語を「リンゴ」にする
単語 = 単語[0].toUpperCase() + 単語.substr(1)
console.log(word) // 出力: "Apple"

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

replace()、match()、search() メソッドを使用して、文字を一致または置換できます。

(1) 置換()

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

文字列.replace(検索値、新しい値)

このメソッドは 2 つのパラメータを取ります。

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

str = "abcdef"とします。
str.replace("c", "z") // 出力: abzdef

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

let str="ブルーさんは青い家と青い車を持っています";
str.replace(/blue/gi, "red"); // 出力: 'ミスター・レッドは赤い家と赤い車を持っています'

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

(2) マッチ()

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

文字列.match(正規表現)

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

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

str = "abcdef"とします。
console.log(str.match("c")) // ["c", インデックス: 2, 入力: "abcdef", グループ: 未定義]

(3) 検索()

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

文字列.検索(検索値)

このメソッドのパラメーター regex は、文字列内で検索される部分文字列、または検索される RegExp オブジェクトになります。

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

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

str = "abcdef"とします。
str.search(/bcd/) // 出力: 1

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

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

(1) トリム()

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

str = "abcdef" とします
str.trim() // 出力: "abcdef"

このメソッドは null、undefined、および Number 型には適用されないことに注意してください。

(2) トリム開始()

trimStart() メソッドは trim() と同じように動作しますが、元の文字列を変更せずに、元の文字列の先頭から空白を削除した新しい文字列を返します。

定数s = 'abc';

s.trimStart() // "abc "

(3) トリム終了()

trimEnd() メソッドは trim() と同じように動作しますが、元の文字列を変更せずに、元の文字列の末尾から空白を削除した新しい文字列を返します。

定数s = 'abc';

s.trimEnd() // " abc"

10. 文字列自体を取得する

valueOf() メソッドと toString() メソッドはどちらも文字列自体の値を返しますが、あまり役に立たないようです。

(1) 値()

valueOf(): 文字列オブジェクトのプリミティブ値を返します。このメソッドは通常、コード内で明示的に呼び出されるのではなく、JavaScript によって自動的に呼び出されます。

str = "abcdef" とします
console.log(str.valueOf()) // "abcdef"

(2) toString()

toString(): 文字列オブジェクト自体を返します

str = "abcdef" とします
console.log(str.toString()) // "abcdef"

11. 文字列を繰り返す

repeat() メソッドは新しい文字列を返します。つまり、元の文字列が n 回繰り返されます。

'x'.repeat(3) // 出力: "xxx"
'hello'.repeat(2) // 出力: "hellohello"
'na'.repeat(0) // 出力: ""

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

'na'.repeat(2.9) // 出力: "nana"

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

'na'.repeat(Infinity) // 範囲エラー
'na'.repeat(-1) // 範囲エラー

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

'na'.repeat(-0.9) // 出力: ""

引数が NaN の場合、0 と同等になります。

'na'.repeat(NaN) // 出力: ""

繰り返しの引数が文字列の場合、まず数値に変換されます。

'na'.repeat('na') // 出力: ""
'na'.repeat('3') // 出力: "nanana"

12. 文字列の長さのパディング

padStart() メソッドと padEnd() メソッドは、文字列の長さを埋め込むために使用されます。文字列が指定された長さでない場合は、先頭または末尾にパディングが行われます。

(1) パッド開始()

padStart() はヘッダーの補完に使用されます。このメソッドには 2 つのパラメータがあります。最初のパラメータはパディング後の文字列の長さを示す数値で、2 番目のパラメータはパディングに使用される文字列です。​

元の文字列の長さが指定された最小長以上の場合は、元の文字列が返されます。

'x'.padStart(1, 'ab') // 'x'

補完に使用される文字列と元の文字列の長さの合計が指定された最小長を超える場合、補完文字列の余分な桁は切り捨てられます。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

2 番目の引数が省略された場合、長さを補完するためにデフォルトでスペースが使用されます。

'x'.padStart(4, 'ab') // 'a'

padStart() の一般的な使用法は、指定された桁数に値を埋め込むことです。最近私が作成した要件の 1 つは、返されるページ番号を 3 桁に埋め込むことです。たとえば、ページ 1 は 001 として表示され、このメソッドを使用して次の操作を実行できます。

"1".padStart(3, '0') // 出力: '001'
"15".padStart(3, '0') // 出力: '015'

(2) パッドエンド()

padEnd() は末尾補完に使用されます。このメソッドも 2 つのパラメータを受け入れます。最初のパラメータは、有効になる文字列補完の最大長であり、2 番目のパラメータは補完に使用される文字列です。

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

13. 文字列を数値に変換する

parseInt() メソッドと parseFloat() メソッドは両方とも、文字列を数値に変換するために使用されます。

(1) パースInt()

parseInt() メソッドは、文字列を解析して整数を返すために使用されます。構文は次のとおりです。

parseInt(文字列、基数)

このメソッドは 2 つのパラメータを取ります。

• 文字列: 必須。解析する文字列。
• 基数: オプション。解析する数値の基数を示します。値は 2 ～ 36 の範囲です。

基数パラメータの値が 0 または設定されていない場合、parseInt() は文字列に基づいて数値の基数を決定します。

parseInt("10"); // 出力: 10
parseInt("17",8); // 出力: 15 (8+7)
parseInt("010"); // 出力: 10 または 8

基数パラメータの値が「0x」または「0X」で始まる場合、基数は 16 です。

parseInt("0x10") // 出力: 16

引数が 2 未満または 36 より大きい場合、parseInt() は NaN を返します。

parseInt("50", 1) // 出力: NaN
parseInt("50", 40) // 出力: NaN

最初の非数字文字が検出されるまで、文字列の最初の数字のみが返されます。

parseInt("40 4years") // 出力: 40

文字列の最初の文字を数値に変換できない場合は、NaN が返されます。

parseInt("new100") // 出力: NaN

先頭と末尾のスペースは許可されます:

parseInt(" 60 ") // 出力: 60

(2) パースフロート()

parseFloat() メソッドは文字列を解析し、浮動小数点数を返します。このメソッドは、文字列の最初の文字が数字であるかどうかを指定します。そうである場合、文字列は数値の末尾に達するまで解析され、数値は文字列ではなく数値として返されます。構文は次のとおりです。

parseFloat(文字列)

parseFloat は文字列引数を浮動小数点数に解析し、それを返します。解析中に、符号 (+ または -)、数値 (0 ～ 9)、小数点、または科学的記数法の指数 (e または E) 以外の文字が検出されると、その文字とそれ以降のすべての文字は無視され、これまでに解析された浮動小数点数を返します。また、引数文字列の先頭の空白文字は無視されます。

parseFloat("10.00") // 出力: 10.00
parseFloat("10.01") // 出力: 10.01
parseFloat("-10.01") // 出力: -10.01
parseFloat("40.5 years") // 出力: 40.5

引数文字列の最初の文字を数値として解析できない場合、parseFloat は NaN を返します。

parseFloat("new40.5") // 出力: NaN

要約する

これで、JavaScript のよく使われる文字列メソッドと使用上のヒントに関するこの記事は終了です。関連する JS のよく使われる文字列メソッドとヒントについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。