JavaScript 速習チュートリアル

JavaScript の文字列メソッド

1. 基本的な文字列メソッド

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

主要なメソッドの一覧は以下の通りです：

  • length（プロパティ）
  • charAt() / charCodeAt() / codePointAt()
  • concat()
  • at()
  • []（ブラケット記法）
  • slice() / substring() / substr()
  • toUpperCase() / toLowerCase()
  • trim() / trimStart() / trimEnd()
  • padStart() / padEnd()
  • repeat()
  • replace() / replaceAll()
  • split()

2. JavaScript 文字列の長さ（Length）

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

let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = text.length; // 結果: 26

3. 文字の抽出

文字を抽出するには主に 4 つの方法があります。

3.1 charAt() メソッド

指定されたインデックス（位置）にある文字を返します。

let text = "HELLO WORLD";
let char = text.charAt(0); // 結果: "H"

3.2 charCodeAt() メソッド

指定されたインデックスにある文字の UTF-16 コード（0 から 65535 の整数）を返します。

let text = "HELLO WORLD";
let char = text.charCodeAt(0); // 結果: 72

3.3 codePointAt() メソッド

文字列内の指定位置にあるコードポイント値を返します。

let text = "HELLO WORLD";
let code = text.codePointAt(0); // 結果: 72

3.4 at() メソッド（ES2022）

ES2022 で導入された最新のメソッドです。

const name = "Volardev.com";
let letter = name.at(2); // 結果: "l"

at() は charAt() と異なり、負のインデックスを使用できます。末尾から 2 番目の文字を取得する場合、myString.at(-2) と記述でき、charAt(myString.length - 2) よりも簡潔です。

4. プロパティアクセス [ ]

配列のようにブラケット記法で文字にアクセスできます。

let text = "HELLO WORLD";
let char = text[0]; // 結果: "H"

注意点：

  • 文字が見つからない場合、[] は undefined を返しますが、charAt() は空文字を返します。
  • 文字列は読み取り専用（Read only）です。str[0] = "A" と記述してもエラーにはなりませんが、値は書き換わりません。

5. 文字列の結合（concat）

concat() は複数の文字列を結合します。

let text1 = "Hello";
let text2 = "World";
let text3 = text1.concat(" ", text2); // 結果: "Hello World"

これはプラス演算子（+）を使用するのと同等です。

       公式ルール： 文字列はイミュータブルです。変更することはできず、常に置き換え（新しい文字列の生成）が発生します。

6. 文字列の一部を抽出

主要なメソッドは 3 つあります。

6.1 slice(start, end)

開始位置から終了位置（終了位置は含まない）までの部分を抽出します。

let text = "リンゴ, バナナ, キウイ";
let part = text.slice(7, 13); // 結果: "バナナ"
  • インデックスは 0 からカウントされます。
  • 第 2 引数を省略すると、残りのすべての文字列を抽出します。
  • 負の数値を指定すると、末尾からカウントします。

6.2 substring(start, end)

slice() とほぼ同じですが、0 未満の数値が 0 として扱われる点が異なります。

let str = "リンゴ, バナナ, キウイ";
let part = str.substring(7, 13);

6.3 substr(start, length)

第 2 引数に「抽出する長さ」を指定します。
警告： substr() は最新の JavaScript 標準では非推奨（Deprecated）となっています。slice() や substring() を使用してください。

7. 大文字・小文字の変換

  • toUpperCase(): すべて大文字に変換
  • toLowerCase(): すべて小文字に変換
let text1 = "Hello World!";
let text2 = text1.toUpperCase(); // "HELLO WORLD!"

8. 空白の除去（Trim）

  • trim(): 両端の空白を除去
  • trimStart(): 先頭の空白のみ除去
  • trimEnd(): 末尾の空白のみ除去
let text1 = "      Hello World!      ";
let text2 = text1.trim(); // "Hello World!"

9. パディング（Padding）

ES2017 で追加された、指定した長さになるまで別の文字列で埋めるメソッドです。

9.1 padStart() / padEnd()

let text = "5";
let padded = text.padStart(4, "0"); // 結果: "0005"

let numb = 5;
let textNum = numb.toString().padEnd(4, "x"); // 結果: "5xxx"

※数値をパディングする場合は、事前に toString() で文字列に変換する必要があります。

10. 文字列の繰り返し（repeat）

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

11. 内容の置換（Replacing）

11.1 replace()

指定した値を別の値に置き換えます。

let text = "Microsoft にアクセスしてください。";
let newText = text.replace("Microsoft", "Volardev");
  • 最初の該当箇所のみを置換します。
  • デフォルトでは大文字・小文字を区別します。区別せずに置換する場合は正規表現の /i フラグを使用します。
  • 全箇所を置換する場合は正規表現の /g フラグを使用します。

11.2 replaceAll() (ES2021)

すべての該当箇所を一度に置換します。正規表現を使用する場合は必ず g フラグを設定する必要があります。

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

12. 配列への変換（split）

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

let text = "a,b,c,d,e";
text.split(",");    // カンマで分割
text.split(" ");    // スペースで分割
text.split("");     // 1文字ずつ分割

セパレータ（区切り文字）を省略すると、文字列全体がインデックス [0] に格納された配列が返されます。