JavaScript で 空白 を トリム する 方法

0 件のコメント

JavaScript で 空白 を トリム(trim、削除) する方法は、何種類か考えられると思いますが… 結局、どの書き方が良いのかわかりませんでした。 そこで、この記事では、"処理速度" という観点で、その方法がよさそうか調査してみました。

まぁ、結論から言うと「ブラウザ毎に違った」という結果でした。。 メインとなるユーザー層が良く使うブラウザで最も速いコードを選ぶ必要があるかもしれません。

JavaScript で 空白 を トリム する コード (測定対象)

var trim1 = function (source) {
    return source.replace(/^\s+|\s+$/g, "");
};

var trim2 = function (source) {
    return source.replace(/(^\s+)|(\s+$)/g, "");
};

var trim3 = function (source) {
    return source.replace(/^[\s]+|[\s]+$/g, "");
};

var trim4 = function (source) {
    return source.replace(/^\s+/, '').replace/\s+$/, '');
};

処理速度 測定方法

テストデータは、アルファベットをランダムに並べ替え、0~26の文字数をランダムに先頭から選択し、前後に0~5文字の空白を付加して生成させる文字列を1000種類、準備、利用しました。 測定は、前述1000種類の文字列のトリム処理を、1000回実行する時間を測定しました。

測定環境は、手元にあったブラウザが Chrome と IE だけだったので、その2種類で計測しています。。

テストデータ

処理速度 測定結果

Chrome 40.0.2214.111 m 単位:[msec]
  平均 1 2 3 4 5
trim1 982.8 529 334 1338 1337 1376
trim2 1181.2 429 1326 1401 1370 1380
trim3 1068.0 420 1378 1064 1194 1284
trim4 484.4 335 1118 305 318 346

 

Internet Explorer 11 単位:[msec]
  平均 1 2 3 4 5
trim1 1633.0 1578 1333 1961 2223 1070
trim2 1112.4 1080 1040 1091 1291 1060
trim3 755.4 585 560 612 1415 605
trim4 917.4 453 446 450 1658 1580

まとめ と 考察

冒頭にも書きましたが、結局、ブラウザによって結果は異なりました。 ただ…使うなら trim3trim4 が良さそうな気がします。 本当は Firefox、Safari あたりも調査したいところですが… また、時間ができたらということにしておきます ( ^ ^ ;

参考記事

最後に… このブログに興味を持っていただけた方は、 ぜひ 「Facebookページ に いいね!」または 「Twitter の フォロー」 お願いします!!