にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

数値の大きい順・小さい順に文字列を並び替える(ソートする)方法 [計算・変換]

JavaScriptのsortメソッドは、標準では「文字コード順」に並べ替える(ソートする)だけですが、引数に比較用関数を与えてやれば、数値の大きい順・小さい順に並べ替えることもできます。入力文字列を、数値の大きい順・小さい順に並び替える(ソートする)サンプルとソースをご紹介。

数値の大きい順・小さい順に文字列を並び替える(ソートする)方法

2つの変数に格納された数値のどちらが大きいか(または小さいか)を調べるには、単にif文などで大なり記号「<」か小なり記号「>」を使って判別すれば良いだけです。……が、たくさんの変数に格納された数値を、大きい順に並べたり小さい順に並べたりするには、自力でループを作るよりももっと楽な書き方があります。

JavaScriptのsortメソッドは、標準では「文字コード順」に並べ替える(ソートする)だけですが、引数として大小判定関数を与えれば、数値の大きい順・小さい順に並べ替えることもできます。
このsortメソッドを使えば、たくさんの数値の並べ替えも楽々です。

以下は、JavaScriptを使って任意の数値群を大きい順または小さい順に並び替えるサンプルと、それを実現するソースです。

入力文字列を、数値の大きい順・小さい順に並び替える(ソートする)サンプル

以下のテキストエリアに適当な文字列を複数行ほど入力してから、下部の「数値の大きい順にソートする」ボタンを押すと、入力内容を数値として解釈して、値の大きい順に並び変わります。「数値の小さい順にソートする」ボタンを押せば、同様に値の小さい順に並び変わります。

◆文字列リスト(半角数値のみ入力):

上記のサンプルでは、数値に変換できる文字列だけが入力されることを前提にしています。
全角数字や漢字など、そのままでは数値として解釈されない文字列が入力されている場合のエラー処理は特に施していないため、それらの文字列があると正しくソートされません。(^_^;)

数値の大きい順で並び替える(ソートする)ためのJavaScriptソース

先ほどのソート処理は、以下のJavaScriptソースで作っています。ここでのソート処理は、JavaScriptに最初から存在するsortメソッドを活用しています(5行目)。このsortメソッドには、引数に「比較用の関数」を指定できます。ここでは、「数値の大小を判別する無名関数」を引数として指定(5~7行目)することで、数値でのソートを実現しています。

JavaScriptソース

function SortByNumLarger() {
   // textareaの内容を改行で分割して配列に格納
   var targetArray = document.getElementById('sampleTargetLines').value.split("\n");
   // 数値の大きい順にソート
   var sortedArray = targetArray.sort( function(a,b) {
      return Number(b) - Number(a);
   } );
   // ソート結果を書き戻す
   document.getElementById('sampleTargetLines').value = StringToSafety( sortedArray.join("\n") );
}

文字列の入力・出力用として、以下のHTMLを用意しています。textarea要素には、JavaScript側から中身(文字列)を扱うために、id属性でid名「sampleTargetLines」を割り振っています。

HTMLソース

◆文字列リスト:
<textarea cols="30" rows="6" id="sampleTargetLines">100
-20
345
: : :
0</textarea>
<input type="button" value="数値の大きい順にソートする" onclick="SortByNumLarger();">

上記のソースによって、「数値の大きい順にソートする」ボタンをクリックすると、テキストエリアに入力した複数行の文字列が(数値として解釈した場合の)値の大きい順に並び変わる機能ができがあります。

数値の小さい順で並び替える(ソートする)ためのJavaScriptソース

逆に、数値の小さい順で並び替えたい場合も、記述するソースはほとんど同じです。ただ、sortメソッドに渡す「比較用の関数」の比較処理部分を逆転させる(6行目)だけです。

JavaScriptソース

function SortByNumLarger() {
   // textareaの内容を改行で分割して配列に格納
   var targetArray = document.getElementById('sampleTargetLines').value.split("\n");
   // 数値の小さい順にソート
   var sortedArray = targetArray.sort( function(a,b) {
      return Number(a) - Number(b);
   } );
   // ソート結果を書き戻す
   document.getElementById('sampleTargetLines').value = StringToSafety( sortedArray.join("\n") );
}

上記のように、sortメソッドに渡す「比較用の関数」を作ることで、好きなように並び替え(ソート)ができます。

なお、数値の大小ではなく、あらゆる文字列を対象にして「文字コード順」に並び替えたい場合の方法は、記事「文字コード順に文字列を並び替える(ソートする)方法」で解説していますのでご参照下さい。文字コード順に並び替える方が実は簡単です。

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---