JavaScriptで文字列をforループで1文字ずつ処理する方法！初心者向け解説
生徒
「先生、JavaScriptで文字列の文字を1文字ずつ操作することってできますか？」
先生
「もちろんできます。forループを使うと簡単に1文字ずつ処理できますよ。」
生徒
「でも、文字列は配列じゃないですよね？どうやってループするんですか？」
先生
「文字列もインデックスを使ってアクセスできるので、配列のようにforループで順番に処理できるんです。それでは基本から見ていきましょう！」
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ループを使うときのポイント
文字列を1文字ずつ処理する際のポイントは以下です。
- ループの開始は
i = 0から - 終了条件は
i < str.length - 文字列のインデックスを正しく指定すること
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. 条件付きで文字を処理する
文字列を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ループを使った簡単な方法
最近の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. 注意点とまとめのヒント
文字列を1文字ずつ操作するときは、undefinedやnullに対する操作に注意しましょう。また、インデックスを間違えると意図しない文字が処理されます。forループやfor...ofループを使うことで、文字列を分析したり変換したりする基本的な操作が習得できます。
