2020/09/03

【split/join】JavaScriptでカンマ区切り文字列を変換する方法

PROGRAM

今回は、JavaScriptでカンマ区切り文字列を変換する方法について、splitメソッドで文字列から配列にする方法とjoinメソッドで配列から文字列にする方法に分け、簡単に解説していきます。

splitメソッドで文字列から配列にする方法

JavaScriptでカンマ区切りの文字列を配列にするには、Stringのsplitメソッドを使います。

Stringのsplitメソッドでは、第一引数に指定した区切り文字列でStringを配列に分割します。

var names_string = "山田,田中,髙橋";
var names_array = names_string.split(',');

上記のコードでは、”山田,田中,髙橋”のカンマ区切り文字列を、splitメソッドを使って、”山田”と”田中”、”髙橋”の3つの要素を持つ配列に変換しています。

joinメソッドで配列から文字列にする方法

JavaScriptで配列をカンマ区切りの文字列にするには、Arrayのjoinメソッドを使います。

Arrayのjoinメソッドでは、第一引数に指定した区切り文字列で配列を文字列に変換します。

var names_array = ["山田","田中","髙橋"];
var names_string = names_array.join(',');

上記のコードでは、”山田”と”田中”、”髙橋”の3つの要素を持つ配列を、joinメソッドを使って、”山田,田中,髙橋”のカンマ区切り文字列に変換しています。

CSVファイルを読み込む方法

JavaScriptではtypeが”file”のinput要素で選択されたCSVファイルを読み込めます。

FileReaderオブジェクトを使うことでUTF-8の文字エンコードであれば読み込み可能です。

var reader = new FileReader();
document.getElementById('file').onchange = function() {
    var file = document.getElementById('file').files[0];
    reader.readAsText(file);
}
reader.onload = function () {
    var tmp = reader.result.split('\n');
    for (var i=0;i<tmp.length;i++) {
        var row = tmp[i].split(',');
        console.log(row[0]+"さんの年齢は"+row[1]+"です。");
    }
}

上記のコードは、各行が”名前,年齢”のCSVファイルをIDが”file”のinput要素で選択することでJavaScriptで読み込み、各行をログに出力するコードです。

• facebook
• Tweet
• Read Later