JavaScript 文字列メソッド

基本的な文字列メソッドについて説明します。JavaScriptの文字列はプリミティブであり、イミュータブルです。すべての文字列メソッドは元の文字列を変更せず、新しい文字列を生成します。

文字列の長さ

lengthプロパティは文字列の長さを返します:


let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length;

文字の抽出

文字を抽出するための4つのメソッドがあります:

  • at() メソッド
  • charAt() メソッド
  • charCodeAt() メソッド
  • 配列と同様にプロパティアクセス []

charAt() メソッド

charAt() メソッドは指定したインデックス(位置)の文字を返します:


let text = "HELLO WORLD";
let char = text.charAt(0);

charCodeAt() メソッド

charCodeAt() メソッドは指定したインデックスの文字のUTF-16コードを返します:


let text = "HELLO WORLD";
let char = text.charCodeAt(0);

at() メソッド

ES2022で追加されたat() メソッドの使用例:


const name = "W3Schools";
let letter = name.at(2);

at() メソッドは指定したインデックス(位置)の文字を返します。

ヒント: at() メソッドは2022年3月以降のすべての現代ブラウザでサポートされています。

プロパティアクセス []

例:


let text = "HELLO WORLD";
let char = text[0];

プロパティアクセスは予測可能性が少し低い場合があります:

  • 文字列を配列のように見せますが(実際には配列ではありません)
  • 文字が見つからない場合、[]undefined を返し、charAt() は空の文字列を返します。
  • 読み取り専用です。 str[0] = "A" はエラーを発生させませんが、機能しません!

文字列の一部の抽出

文字列の一部を抽出するための3つのメソッドがあります:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

slice() メソッド

slice() メソッドは文字列の一部を抽出して新しい文字列として返します:


let text = "Apple, Banana, Kiwi";
let part = text.slice(7, 13);

ヒント: マイナスのパラメータを使用すると、文字列の末尾からの位置を指定できます。

substring() メソッド

substring() メソッドもslice() と似ていますが、負の値が指定された場合は0として扱います:


let str = "Apple, Banana, Kiwi";
let part = str.substring(7, 13);

substr() メソッド

substr() メソッドはslice() と似ていますが、2番目のパラメータは抽出する部分の長さを指定します:


let str = "Apple, Banana, Kiwi";
let part = str.substr(7, 6);

大文字と小文字への変換

大文字に変換するには toUpperCase() メソッドを使用します:


let text1 = "Hello World!";
let text2 = text1.toUpperCase();

小文字に変換するには toLowerCase() メソッドを使用します:


let text1 = "Hello World!";
let text2 = text1.toLowerCase();

文字列の結合

concat() メソッドは2つ以上の文字列を結合します:


let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2);

concat() メソッドはプラス演算子の代わりに使用することもできます。

空白の削除

trim() メソッドは文字列の両端から空白を削除します:


let text1 = "      Hello World!      ";
let text2 = text1.trim();

先頭の空白の削除

trimStart() メソッドは文字列の先頭からの空白を削除します:


let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

ヒント: trimStart() メソッドは2020年1月以降のすべての現代ブラウザでサポートされています。

末尾の空白の削除

trimEnd() メソッドは文字列の末尾からの空白を削除します:


let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

ヒント: trimEnd() メソッドは2020年1月以降のすべての現代ブラウザでサポートされています。

文字列のパディング

ECMAScript 2017には、文字列の先頭および末尾にパディングするためのpadStart() および padEnd() という2つの新しい文字列メソッドが追加されました。

padStart() メソッド

padStart() メソッドは文字列の先頭からパディングします。


let text = "5";
let padded = text.padStart(4, "0");

ヒント: padStart() メソッドは2017年9月以降のすべての現代ブラウザでサポートされています。

padEnd() メソッド

padEnd() メソッドは文字列の末尾からパディングします。


let text = "5";
let padded = text.padEnd(4, "0");

ヒント: padEnd() メソッドは2017年9月以降のすべての現代ブラウザでサポートされています。

文字列の繰り返し

repeat() メソッドは指定された回数分、文字列を繰り返して新しい文字列を返します。


let text = "Hello world!";
let result = text.repeat(2);

ヒント: repeat() メソッドは2017年6月以降のすべての現代ブラウザでサポートされています。

文字列の置換

replace() メソッドは文字列内の指定された値を別の値に置換します。


let text = "Please visit Microsoft!";
let newText = text.replace("Microsoft", "W3Schools");

ヒント: replace() メソッドは最初の一致のみを置換します。すべての一致を置換するには正規表現と /g フラグを使用します。

JavaScript 2021での置換の改善

JavaScript 2021では、replaceAll() メソッドが導入されました:


text = text.replaceAll("Cats", "Dogs");

replaceAll() メソッドは正規表現を指定できますが、グローバルフラグ(g)が必要です。さもなければ TypeError がスローされます。

文字列の配列への変換

文字列を配列として扱うには、split() メソッドを使用します:


text.split(",")    // カンマで分割
text.split(" ")    // スペースで分割
text.split("|")    // パイプで分割

区切り文字が省略された場合、戻り値の配列には文字列全体がインデックス [0] に含まれます。


text.split("")