あれ、いつも書いてるな～というJavaScript の小技集

JavaScript

2014.03.05

いい加減髪を切りたいminamiです。

JavaScriptでいつも書いてるな～という処理や、知っていると便利なTipsを簡潔に集めた記事を見てほお～と思ったものがいくつもあったので抜粋してみました。

※追記1：ご指摘がありましたので一部修正しました。「配列をソートする」ではなく「配列をシャッフルする」でした。
※追記2：「HTMLをエスケープする」のソースがまちがって表示されていました。修正しました。

※追記3：予想以上に反響が大きく、多数ご指摘を受けてしまいました。よく使う処理の書き方もいろいろあるんだな～という参考程度にご紹介したのですが、参照元の記事の内容の検証が不十分なまま紹介してしまい申し訳ありませんでした。いろいろと勉強になりました！

45 Useful JavaScript Tips, Tricks and Best Practices

配列からランダムで値を取り出す

var ary = ['犬','猫','鳥','タコ','イカ'];
var random = ary[Math.floor(Math.random() * ary.length)];

Math.random() * 数値でその範囲内のランダムな値を取得できます。

決められた範囲からランダムに値を取りだす

var x = Math.floor(Math.random() * (max - min + 1)) + min;

min以上max未満の値を取得できます。

等差数列の配列を作る

var numbersArray = [] , max = 100;
for( var i=1; numbersArray.push(i++) < max;);

[1,2,3...100] のような配列を作ることができます。push()と数値++を同時にやってるのがスマートですね。

A-Zのアルファベットと英数字からランダムな文字列を取得する

function generateRandomAlphaNum(len) {
  var rdmString = "";
  for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
  return  rdmString.substr(0, len);
}

引数で与えた文字数のA-Z+数字でできたランダムな文字列を取得できます。

配列をシャッフルする

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});

~~配列のシャッフルも1行で書けます。~~

※追記：結構指摘が入ってしまいました。シャッフルの性能自体に問題があるようですのでやはり下記のようなコードでシャッフルするか、Underscore.js などの配列をシャッフルする機能を使った方がよさそうです。

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
function shuffleAry(ary) {
  var i = ary.length;
  while(i){
    var j = Math.floor(Math.random()*i);
    var t = ary[--i];
    ary[i] = ary[j];
    ary[j] = t;
  }
  return ary;
}
console.log(shuffleAry(numbers));

trim()関数

String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
var txt = '         ワレワレハウチュウジン ダ      ';
txt = txt.trim();
console.log(txt); // ワレワレハウチュウジンダ

~~文字列の前後の空白を削除するtrim();関数を実装します。\s+ を [\s　]+ としてやると全角スペースも削除できます。~~

※追記：String.trim メソッドはECMAScript5ではネイティブメソッドになっています。JavaScript1.8.1 からは標準で使えるようです。

String.trim - JavaScript | MDN

文字列が数値かどうかを判定する

function isNumber(n){
    return !isNaN(parseFloat(n)) && isFinite(n);
}

console.log(isNumber('99')); // true
console.log(isNumber('九十九')); // false

与えられた文字列が数字ならばtrueを返します。

AND/ORで実行するかどうかを判定する

var foo = 10;  
foo === 10 && doSomething(); // if (foo === 10) doSomething(); と同じ処理
foo === 5 || doSomething(); // if (foo !== 5) doSomething();と同じ処理

if文を使わずに簡単な分岐処理が書けます。

HTMLをエスケープする

function escapeHTML(text) {  
    var replacements= {"<": "&lt;", ">": "&gt;","&": "&amp;", "\"": "&quot;"};                      
    return text.replace(/[<>&"]/g, function(character) {  
        return replacements[character];  
    }); 
var txt = escapeHTML('<div>HOGE</div>');

HTMLが含まれた文字列をエスケープします。

※追記：シングルクォーテーションのエスケープが抜けてるじゃないか！とご指摘をいただきました。やはりこれもUnderscore.js 等で用意されているescape()メソッドなどを使った方が信頼性が高いです・・・