コードスニペット

このページはしばしば必要となる処理の、JavaScriptでの実装をコードスニペットとしてまとめたものです。

ただ、単純な実装やありふれた実装のコードスニペットは巷にあふれているかと思いますので、ひねくれた一風変わった(と思われる)ものを主に取りそろえています。

数値をゼロパディングする
var string;
(string = '' + number).length < n ? ('' + (Math.pow( 10, string.length + 1 ) + number)).slice( 1 ) : string;

正の整数numberをゼロパディング(前ゼロ埋め)し、n文字の文字列を作成します。

数値の桁数を調べて先頭に0を1つずつループで追加する単純実装ではなく、10n+1を加算した文字列から必要な部分を切り取ります。numberの桁数がn以上の場合は、何もせずに文字列化します。

数値処理による実装のため、JavaScriptの処理系で表現可能な最大の整数以上桁数の数値に対しては正常な結果を得ることができません。

数値をカンマ区切りにする
('' + number).replace( /(\d+?)(?=(\d{3})+(\.\d+)?$)/g, '$1,' )

固定小数点数numberの整数部を3桁ごとにカンマで区切った文字列を作成します。

地道な文字列または数値処理ループではなく、正規表現で一気に置換します。肯定的前方先読みを使用しているため、古いJavaScriptの処理系では動作しない可能性があります。

整数のみを対象とする場合は、小数部を示す正規表現を省略することができます。

('' + number).replace( /(\d+?)(?=(\d{3})+$)/g, '$1,' )
数値を有効数字で丸める
/^(.*?)e(.*)$/.test( Number( number ).toExponential( n - 1 ) ) ? +Number( RegExp.$1 * Math.pow( 10, RegExp.$2 ) ).toPrecision( n ) : undefined

numbern桁の有効数字で丸めます。

NumbertoExponentialが指数表記の文字列にする際に仮数部の桁数を指定できることと、指数部で数値の小数点位置が分かることを利用します。このため、精度と丸めかたはtoExponentialの実装に依存します。

numberが0よりも小さい場合は、小数点の移動(乗算)の際に誤差が発生する可能性があるため、NumbertoPrecisionでもう一度丸めます。

Numberの前の+は、toPrecisionによって小数部の末尾につけられた0を取り除くためです。この処理が不要であれば削除してください。

整数のみを対象とする場合などでは、toPrecisionの処理まわりを省略することができます。

/^(.*?)e(.*)$/.test( Number( number ).toExponential( n - 1 ) ) ? RegExp.$1 * Math.pow( 10, RegExp.$2 ) : undefined
月の日数を取得する
(new Date( year, month, 0 )).getDate()

yearmonth月の日数、または最後の日を取得します。

Dateのコンストラクタで日(第3引数)に0を指定すると、前の月の最後の日として解釈されることを利用します。

JavaScriptの実装によっては意図した通りに動作しないかもしれませんが、確認した範囲(Windows Internet Explorer/8.0、Mozilla Firefox/3.6、Safari/4.0、Google Chrome/6.0およびOpera/10.62)では問題ありませんでした。

yyyymmddを取得する
date.getFullYear() + ('0' + (date.getMonth() + 1)).slice( -2 ) + ('0' + date.getDate() + 1).slice( -2 )
date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate()

dateから「yyyymmdd」の文字列または数値を作成します。

Dateの文字列化メソッドはJavaScriptの処理系やロケールよって出力が異なるため、意図しない文字列にしないようにするには、自分で文字列化する必要があります。しかし、JavaScriptには他の言語にある書式に従って文字列を作成するsprintfや、同じく日時情報を文字列化するstrftimeが備わっていないため、他の言語では1つの関数やメソッドで実現できることを、年・月・日を自分で組み合わせて記述しなければなりません。

1つ目は文字列処理による実装です。月と日は1桁の場合があるため、頭に0をつけてから後ろの2文字を切り取ることで常に2桁にします。

2つ目は数値処理による実装です。冒頭のゼロパディングの実装と同じように、yyyymmddを8桁の数値として処理するため、文字列処理のような月と日が1桁の場合を考慮する必要がありませんが、「yyyy/mm/dd」のような文字列を作成する場合には不向きです。

hhmmssを取得する
('0' + date.getHours()).slice( -2 ) + ('0' + date.getMinutes()).slice( -2 ) + ('0' + date.getSeconds()).slice( -2 )

dateから「hhmmss」(または「hhnnss」)の文字列を作成します。

yyyymmdd文字列を取得する場合と同様、時・分・秒を桁数による場合分けをする代わりに、頭に0をつけてから後ろの2文字を切り取ります。

JavaScriptの実装やロケールによっては意図した通りに動作しないかもしれませんが、toStringで作成される文字列から切り出す方法も考えられます。

('' + date).replace( /^.*?(\d\d):(\d\d):(\d\d).*$/, '$1$2$3' )
CSSルールを追加する
var stylesheet = document.styleSheets[i];
var rules = stylesheet.rules || stylesheet.cssRules;
if( /*@cc_on!@*/1 ) stylesheet.insertRule( selector + '{' + declaration + '}', j )
else {
var selectors = selector.split( /\s*,\s*/ );
for( var k in selectors ) stylesheet.addRule( selectors[k], declaration, j + k );
}

スタイルシートiのインデックスjにセレクタselector・宣言declarationのルールを追加します。

Microsoft/Windows Internet Explorerとそれ以外のモダンブラウザでは実装が異なるため、条件付きコンパイル(Conditional Compilation)で使用するメソッドを切り替えるとともに、セレクタがグループ化されている場合を考慮して、カンマで単純セレクタに分割して追加します。

selectorが単純セレクタに限定