JavaScript 文字列メソッド

String slice()
String substring()
String substr()
String replace()
String replaceAll()
String toUpperCase()
String toLowerCase()
String concat()

String trim()
String trimStart()
String trimEnd()
String padStart()
String padEnd()
String charAt()
String charCodeAt()
String split()

メモ

文字列searchメソッドについては、次の章で説明します。

JavaScript文字列の長さ

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

例

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

文字列部分の抽出

文字列の一部を抽出するには、次の3つの方法があります。

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

JavaScript文字列slice()

slice()は文字列の一部を抽出し、抽出した部分を新しい文字列で返します。

このメソッドは、開始位置と終了位置(終了は含まれません)の2つのパラメーターを取ります。

例

位置7から位置13までの文字列の一部を切り出します。

let text = "りんご, バナナ, キウイ"; let part = text.slice(7, 13);

注意

JavaScriptは位置を0からカウントします。
最初の位置は0です。
2番目の位置は1です。

例

2番目のパラメーターを省略すると、メソッドは残りの文字列を切り出します。

let text = "りんご, バナナ, キウイ"; let part = text.slice(7);

パラメータが負の場合、位置は文字列の末尾からカウントされます。

let text = "りんご, バナナ, キウイ"; let part = text.slice(-12);

この例では、位置-12から位置-6までの文字列の一部を切り出します。

let text = "りんご, バナナ, キウイ"; let part = text.slice(-12, -6);

JavaScript文字列substring()

substring()は、slice()に似ています。

違いは、substring()では0未満の開始値と終了値が0として扱われることです。

例

let str = "りんご, バナナ, キウイ"; let part = str.substring(7, 13);

2番目のパラメーターを省略すると、substring()は残りの文字列を切り出します。

JavaScript文字列substr()

substr()は、slice()に似ています。

違いは、2番目のパラメーターで抽出された部分の長さを指定することです。

例

let str = "りんご, バナナ, キウイ"; let part = str.substr(7, 6);

2番目のパラメーターを省略すると、substr()は残りの文字列を切り出します。

例

let str = "りんご, バナナ, キウイ"; let part = str.substr(7);

最初のパラメーターが負の場合、位置は文字列の末尾からカウントされます。

例

let str = "りんご, バナナ, キウイ"; let part = str.substr(-4);

文字列コンテンツの置換

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

例

let text = "Microsoftにお越しください！"; let newText = text.replace("Microsoft", "TECH I.S.");

注意

replace()メソッドは、呼び出された文字列を変更しません。
replace()メソッドは新しい文字列を返します。
replace()メソッドは最初に一致したもののみを置換します。
すべての一致を置換する場合は、/gフラグを設定した正規表現を使用します。以下の例を参照してください。

デフォルトでは、replace()メソッドは最初に一致したもののみを置換します。

例

let text = "MicrosoftとMicrosoftにお越しください！"; let newText = text.replace("Microsoft", "TECH I.S.");

デフォルトでは、replace()メソッドは大文字と小文字を区別します。 MICROSOFT(大文字を使用)の記述は機能しません。

例

let text = "Microsoftにお越しください！"; let newText = text.replace("MICROSOFT", "TECH I.S.");

大文字と小文字を区別せずに置き換えるには、/iフラグ(区別しない)を指定した正規表現を使用します。

例

let text = "Microsoftへお越しください！"; let newText = text.replace(/MICROSOFT/i, "TECH I.S.");

注意

正規表現は引用符なしで記述されます。

すべての一致を置き換えるには、/gフラグを指定した正規表現(グローバル一致)を使用します。

例

let text = "MicrosoftとMicrosoftにお越しください！"; let newText = text.replace(/Microsoft/g, "TECH I.S.");

注意

正規表現については、JavaScript 正規表現の章でさらに詳しく学習します。

JavaScript文字列ReplaceAll()

2021 年、JavaScriptに文字列メソッドreplaceAll()が導入されました。

例

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

replaceAll()メソッドを使用すると、置換する文字列の代わりに正規表現を指定できます。

パラメータが正規表現の場合、グローバルフラグ(g)を設定する必要があります。設定しないと、TypeErrorがスローされます。

例

text = text.replaceAll(/Cats/g,"Dogs"); text = text.replaceAll(/cats/g,"dogs");

注意

replaceAll()はES2021の機能です。
replaceAll()はInternet Explorerでは機能しません。

大文字と小文字への変換

文字列はtoUpperCase()で大文字に変換されます。

文字列はtoLowerCase()で小文字に変換されます。

JavaScript文字列toUpperCase()

例

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

JavaScript文字列toLowerCase()

例

let text1 = "Hello World!"; // 文字列 let text2 = text1.toLowerCase(); // text2はtext1を小文字に変換したものです。

JavaScript文字列concat()

concat()は2つ以上の文字列を結合します。

例

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

concat()メソッドは、プラス演算子の代わりに使用できます。これらの2行は同じことを行います。

例

text = "Hello" + " " + "World!"; text = "Hello".concat(" ", "World!");

注意

すべての文字列メソッドは新しい文字列を返します。元の文字列を変更しません。
正式には次のように述べています。
文字列は不変です：文字列は変更できず、置き換えられるだけです。

JavaScript文字列trim()

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

例

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

JavaScript文字列trimStart()

ECMAScript2019では、StringメソッドtrimStart()がJavaScriptに追加されました。

trimStart()メソッドは、trim()と同様に機能しますが、文字列の先頭からのみ空白を削除します。

例

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

JavaScript文字列TrimStart()は、2020年1月以降、すべての最新ブラウザでサポートされています。


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
2018年4月	2020年1月	2018年6月	2018年9月	2018年5月

JavaScript文字列trimEnd()

ECMAScript2019では、文字列メソッドtrimEnd()がJavaScriptに追加されました。

trimEnd()メソッドは、trim()と同様に機能しますが、文字列の末尾からのみ空白を削除します。

例

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

JavaScript文字列trimEnd()は、2020 年1月以降、すべてのブラウザーでサポートされています。


Chrome 66	Edge 79	Firefox 61	Safari 12	Opera 50
2018年4月	2020年1月	2018年6月	2018年9月	2018年5月

JavaScript文字列パディング

ECMAScript2017では、JavaScriptに2つの新しい文字列メソッド、padStart()と PadEnd()が追加され、文字列の先頭と末尾のパディングをサポートしました。

JavaScript文字列padStart()

padStart()メソッドは、別の文字列で文字列をパディングします。

例

文字列が長さ4になるまで "0 "で埋める。

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

　
文字列が長さ4になるまで "x "で埋める。

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

注意

padStart()メソッドは文字列メソッドです。

数値を埋め込むには、まず数値を文字列に変換します。

以下の例を参照してください。

例

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

ブラウザのサポート

padStart()はECMAScript2017の機能です。

最新のすべてのブラウザーでサポートされています。


Chrome	Edge	FireFox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

padStart()はInternet Explorerではサポートされていません。

javascript文字列padEnd()

padEnd()メソッドは、文字列を末尾からパッドする。

文字列が与えられた長さに達するまで、文字列を別の文字列で（複数回）埋める。

例

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

例

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

注意

padEnd()メソッドは文字列メソッドです。

数値を埋め込むには、まず数値を文字列に変換します。

以下の例を参照してください。

例

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

ブラウザのサポート

padEnd()はECMAScript2017の機能です。

最新のすべてのブラウザーでサポートされています。


Chrome	Edge	FireFox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

padEnd()はInternet Explorerではサポートされていません。

文字列の抽出

文字列の文字を抽出するには、次の3つの方法があります。

charAt(position)
charCodeAt(position)
プロパティへのアクセス [ ]

JavaScript文字列charAt()

charAt()メソッドは、文字列内の指定されたインデックス(位置)にある文字を返します。

例

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

JavaScript文字列charCodeAt()

charAt()メソッドは、文字列内の指定されたインデックス(位置)にある文字を返します。

このメソッドは、UTF-16コード(0から65535までの整数) を返します。

例

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

プロパティへアクセス

ECMAScript5(2009)では、文字列のプロパティへアクセス[ ]が許可されています。

例

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

注意

プロパティへのアクセスは少し予測できない場合があります。

文字列を配列のように見せます（実際はそうではありません）
文字が見つからなかった場合、[ ]は未定義を返しますが、charAt()は空の文字列を返します。
読み取り専用です。 str[0] = "A"ではエラーは発生しません (ただし、機能しません)。

例

let text = "HELLO WORLD"; text[0] = "A"; // エラーは出ないが動作しない

文字列を配列に変換する

文字列を配列として操作する場合は、配列に変換できます。

JavaScript文字列split()

文字列は、split()メソッドを使用して配列に変換できます。

例

text.split(",") // カンマで区切る text.split(" ") // スペースで区切る text.split("|") // パイプで区切る

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

区切り文字が""の場合、返される配列は単一文字の配列になります。

例

text.split("")

完全な文字列リファレンス

完全な文字列リファレンスについては、次のリンクを参照してください。

完全なJavaScript文字列リファレンス（開発準備中）

リファレンスには、すべての文字列プロパティとメソッドの説明と例が含まれています。

おすすめのプログラミングスクールを確認する！

プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう！

スクールの詳細

JavaScript 文字列メソッド

メモ

JavaScript文字列の長さ

例

文字列部分の抽出

JavaScript文字列slice()

例

注意

例

JavaScript文字列substring()

例

JavaScript文字列substr()

例

例

例

文字列コンテンツの置換

例

注意

例

例

例

注意

例

注意

JavaScript文字列ReplaceAll()

例

例

注意

大文字と小文字への変換

JavaScript文字列toUpperCase()

例

JavaScript文字列toLowerCase()

例

JavaScript文字列concat()

例

例

注意

JavaScript文字列trim()

例

JavaScript文字列trimStart()

例

JavaScript文字列trimEnd()

例

JavaScript文字列パディング

JavaScript文字列padStart()

例

注意

例

ブラウザのサポート

javascript文字列padEnd()

例

例

注意

例

ブラウザのサポート

文字列の抽出

JavaScript文字列charAt()

例

JavaScript文字列charCodeAt()

例

プロパティへアクセス

例

注意

例

文字列を配列に変換する

JavaScript文字列split()

例

例

完全な文字列リファレンス

プログラミング学習を加速させる

チュートリアル