JavaScriptでのreplaceを使った文字列置換方法を紹介｜replaceでの文字列置換方法を学ぼう！
目次
JavaScriptの繰り返し処理 – for文の使い方とは？
今回は、JavaScriptの繰り返し構文である、for文の使い方について説明します。
例えば、1から10まで繰り返し処理をしたり、配列の要素数分繰り返し処理したい場面があると思います。
for文の使い方をマスターすれば、繰り返し処理が効率的に実現できます。
JavaScriptのfor文の使い方に興味のある方はぜひご覧ください。
基本的な使い方
JavaScriptのfor文の基本的な使い方を紹介します。
以下のように記述します。
|
1 2 3 4 5 |
for (初期値; 繰り返し条件; 増減値) { // 繰り返し処理 } |
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 |
// 0～4まで繰り返し処理 for (let i = 0; i < 5; i++) { console.log('i = ' + i); } |
実行結果は以下のようになります。
|
1 2 3 4 5 |
i = 0 i = 1 i = 2 i = 3 i = 4 |
JavaScriptのfor文はこのように記述します。
配列に対するfor文
JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
// 配列の定義 var array = ['data1', 'data2', 'data3', 'data4', 'data5']; // 配列の要素数分繰り返し for ( let i = 0; i < array.length; i++ ) { console.log ( array[ i ] ); } |
実行結果は以下のようになります。
|
1 2 3 4 5 |
data1 data2 data3 data4 data5 |
配列.lengthで、配列の要素数が取得できます。
0 ～ 配列要素数-1 までの要素を繰り返し処理で出力しています。
また、配列ではfor-of文で繰り返し処理が行えます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 |
// 配列の定義 var array = ['data1', 'data2', 'data3', 'data4', 'data5']; // 配列の要素数分繰り返し for( var item of array ) { console.log( item ); } |
実行結果は以下のようになります。
|
1 2 3 4 5 |
data1 data2 data3 data4 data5 |
lengthを使用することなく、配列要素の繰り返し処理が実現できています。
このように、JavaScriptでは配列要素の繰り返し処理にfor文が使用できます。
for-in文
JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
見た目はfor-ofとよく似ていますので、間違えないように注意してください。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// personオブジェクトの生成 var person = { name: '太郎', age: 30, gender: '男' } // personオブジェクトの要素を取り出す for( var item in person ) { console.log( item + "" : "" + person[ item ] ); } |
実行結果は以下のようになります。
|
1 2 3 |
name : 太郎 age : 30 gender : 男 |
このように、JavaScriptではオブジェクトの繰り返し処理にfor-in文が使用できます。
ちなみに、配列に対してfor-in文を使用すると以下のようになります。
|
1 2 3 4 5 6 7 8 9 |
// 配列の定義 var array = ['data1', 'data2', 'data3', 'data4', 'data5']; // 配列の要素数分繰り返し for( var item in array ) { console.log( item ); } |
実行結果は以下のようになります。
|
1 2 3 4 5 |
0 1 2 3 4 |
実行エラーにはなりませんが、配列のインデックスが出力されます。
break
JavaScriptでは、for文のブロックを抜けるには””break””を使用します。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
// 0～4まで繰り返し処理 for (let i = 0; i < 5; i++) { // iが3の場合にbreak if(i == 3) { console.log('break'); break; } console.log('i = ' + i); } |
実行結果は以下のようになります。
|
1 2 3 4 |
i = 0 i = 1 i = 2 break |
iが3になったらbreakすることで、for文のブロックを抜けていることが分かります。
このように、JavaScriptではfor文のブロックを抜けるには””break””を使用します。
continue
JavaScriptでは、for文のブロックをスキップするには””continue””を使用します。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
// 0～4まで繰り返し処理 for (let i = 0; i < 5; i++) { // iが3の場合にcontinue if(i == 3) { console.log('continue'); continue; } console.log('i = ' + i); } |
実行結果は以下のようになります。
|
1 2 3 4 5 |
i = 0 i = 1 i = 2 continue i = 4 |
iが3の場合に、continueを実行することでfor文のブロックをスキップします。
このように、JavaScriptではfor文のブロックをスキップするには””continue””を使用します。
forEach
JavaScriptでは、forEach文で繰り返し処理が行えます。
forEach文は配列の繰り返し処理にだけ使用できます。
実際のソースコードを見てみましょう。
|
1 2 3 4 5 6 |
let array = [ ""item1"", ""item2"", ""item3"", ""item4"", ""item5"" ]; array.forEach( function( item ) { console.log( item ); }); |
実行結果は以下のようになります。
|
1 2 3 4 5 |
item1 item2 item3 item4 item5 |
配列の要素数分のデータが出力されていることが分かります。
また、JavaScriptではラムダ式である””アロー演算子””を使って、forEachメソッドを記述することができます。
実際のソースコードを見てみましょう。
|
1 2 3 4 |
let array = [ ""item1"", ""item2"", ""item3"", ""item4"", ""item5"" ]; array.forEach(item => console.log(item)); |
実行結果は以下のようになります。
|
1 2 3 4 5 |
item1 item2 item3 item4 item5 |
配列の要素数分のデータが出力されていることが分かります。
こちらの方がシンプルですね。
また、配列のインデックスも取得したい場合は以下のように記述します。
|
1 2 3 4 5 6 7 |
let array = [ ""item1"", ""item2"", ""item3"", ""item4"", ""item5"" ]; array.forEach( function( item, index ) { console.log( 'index: ' + index + ', item: ' + item ); }); |
実行結果は以下のようになります。
|
1 2 3 4 5 |
index: 0, item: item1 index: 1, item: item2 index: 2, item: item3 index: 3, item: item4 index: 4, item: item5 |
このように、JavaScriptではforEach文で繰り返し処理が行えます。
JavaScriptでreplaceを使って文字列置換してみよう
いかがでしたでしょうか。
JavaScriptでのreplace関数を使った文字列置換方法について説明しました。
replace関数を使用することで、以下のようなことができます。
・最初にマッチする文字列のみを置換
・マッチするすべての文字列を置換
・最後にマッチする文字列のみを置換
また、マッチする文字列を別の関数に渡すこともできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
