JavaScriptで文字列をforループで1文字ずつ処理する方法！初心者向け解説

1. forループで文字列を1文字ずつ処理する基本

1. forループで文字列を1文字ずつ処理する基本

JavaScriptでは文字列を配列のように扱うことができます。インデックス番号は0から始まり、文字列の長さはlengthで取得できます。

const str = "JavaScript";

for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

J
a
v
a
S
c
r
i
p
t

このようにstr[i]で1文字ずつ取得できます。文字列の長さを超えるとundefinedになるので注意が必要です。

2. forループを使うときのポイント

2. forループを使うときのポイント

文字列を1文字ずつ処理する際のポイントは以下です。

• ループの開始はi = 0から
• 終了条件はi < str.length
• 文字列のインデックスを正しく指定すること

3. 大文字・小文字の変換も1文字ずつ可能

3. 大文字・小文字の変換も1文字ずつ可能

例えば文字列の全ての文字を大文字に変換したい場合も、forループで1文字ずつ処理できます。

const str = "hello";
let result = "";

for (let i = 0; i < str.length; i++) {
  result += str[i].toUpperCase();
}

console.log(result);

HELLO

toUpperCase()は文字列を大文字に変換するメソッドです。同様にtoLowerCase()で小文字に変換できます。

4. 条件付きで文字を処理する

4. 条件付きで文字を処理する

文字列を1文字ずつ処理しながら条件を付けて操作することもできます。例えば母音だけを抽出する場合です。

const str = "JavaScript";
let vowels = "";

for (let i = 0; i < str.length; i++) {
  if ("aeiouAEIOU".includes(str[i])) {
    vowels += str[i];
  }
}

console.log(vowels);

aai

このようにif文と組み合わせると、文字列を分析したり、必要な文字だけ取り出したりできます。

5. for...ofループを使った簡単な方法

5. for...ofループを使った簡単な方法

最近のJavaScriptではfor...ofを使うと、さらに簡単に1文字ずつ処理できます。

const str = "JavaScript";

for (const char of str) {
  console.log(char);
}

J
a
v
a
S
c
r
i
p
t

for...ofは文字列や配列を順番に処理するための便利な構文です。インデックスを意識せずに書けるので初心者にもおすすめです。

6. 注意点とまとめのヒント

6. 注意点とまとめのヒント

文字列を1文字ずつ操作するときは、undefinedやnullに対する操作に注意しましょう。また、インデックスを間違えると意図しない文字が処理されます。forループやfor...ofループを使うことで、文字列を分析したり変換したりする基本的な操作が習得できます。