アプリ関連ニュース | ギガスジャパン

ホーム
アプリ関連ニュース

アプリ関連ニュース

2019年4月17日
他の話題

新人日誌11

Javascriptでカンマ区切りの文字列を配列にし、

abc順に並び替えて再度カンマ区切りの文字列にしてみました。

//元になる文字列データ
var data = "strawberry,banana,tomato,apple";

1 2	//元になる文字列データ var data = "strawberry,banana,tomato,apple";

並び替える前のデータは、このabc順でバラバラなカンマ区切りの文字列です。

このデータをカンマごとに分割した文字列の配列にします。

そのためにsplit()メソッドを使います。引数に’,’を渡し、カンマごとに分割します。

//配列化
var dataArray = data.split(',');

1 2	//配列化 var dataArray = data.split(',');

これで変数dataArrayの中に分割された後の文字列の配列が入りました。

ログに出して確認してみます。

for (let i = 0; i &lt; dataArray.length; i++) {
  console.log((i + 1) + '番目のフルーツは　：' + dataArray[i] + "です。");
}

1

2

3

for (let i = 0; i < dataArray.length; i++) {

console.log((i + 1) + '番目のフルーツは　：' + dataArray[i] + "です。");

}

この配列をabc順に並び替えます。

そのために、sortメソッドを使用します。

//abc順に並び替え
dataArray.sort(function (a, b) {
    //小文字に揃えて比較
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if (b > a) {
        return -1;
    } else {
        return 1;
    }
    return 0;
 });

1

2

3

4

5

6

7

8

9

10

11

12

//abc順に並び替え

dataArray.sort(function (a, b) {

//小文字に揃えて比較

a = a.toString().toLowerCase();

b = b.toString().toLowerCase();

if (b > a) {

return -1;

} else {

return 1;

}

return 0;

});

Sortメソッドの引数の無名関数は各要素を比較するための処理です。

再度配列の内容を表示してみます。

for (let i = 0; i &lt; dataArray.length; i++) {
     console.log((i + 1) + '番目のフルーツは　：' + dataArray[i] + "　です。");
}

1

2

3

for (let i = 0; i < dataArray.length; i++) {

console.log((i + 1) + '番目のフルーツは　：' + dataArray[i] + "　です。");

}

最後にカンマ区切りの文字列データに戻します。

配列を特定の区切り文字で文字列化するために.join()メソッドを使います。

引数は区切り文字です。

data = dataArray.join(',');

1	data = dataArray.join(',');

この文字列の並び替え処理は多くの場面で使いそうです。

水曜担当:Tanaka

tanaka at 2019年04月17日 10:00:02

2019年4月10日
他の話題

新人日誌10

今回はjQury-uiのautocompleteを使ってみます。

続きを読む

tanaka at 2019年04月10日 10:00:31

2019年4月01日
他の話題

STADIA

Googleがゲーム業界に乗り出してきましたね

続きを読む

SH at 2019年04月01日 10:00:49

2019年3月27日
他の話題

新人日誌9

javascriptでのスリープ機能について

続きを読む

tanaka at 2019年03月27日 10:00:18

2019年3月20日
他の話題

新人日誌8

Webブラウザ上に表示したGoogle Mapで検索条件に合致した現在地周辺の場所の情報を取得してみます。

続きを読む

tanaka at 2019年03月20日 10:00:09

前の記事 »

@GIGASJAPAN_APPS からのツイート

アプリ関連ニュース

iPhone・Android開発アプリ

アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833（平日 10:00～17:00）

お問い合わせフォーム