dara-j

.NET Framework風、再び

以前のエントリ「String.format」でやりたいと思っていた、書式指定子のサポートをとりあえずやってみた。

ダウンロード

こちらから。

• format.js

能書き

元々.NET Frameworkの劣化コピー的な発想なので、DateとNumberに書式指定可能なformatメソッドを追加し、String.formatのプレースホルダに指定した書式指定子をそのまま各クラスのformatに渡すように考えた。

Dateはdateformat.jsを使わせてもらえば楽だったんだけど、クリエイティブ・コモンズのライセンス適用範囲に不安があったので結局自前で実装することにした。 ただし、書式指定文字のエスケープができない、パーサの実装がないなどの面であきらかにdateformat.jsより劣っているのでorz、たいていはそちらを使ったほうがよいと思われる。 （あと、組み込みオブジェクトの拡張が嫌いな場合とか）

なくても実装は可能だったが、prototype.jsを前提に実装したため、prototype.jsを必要とする。完全に確認はしていないが、1.4.0以降なら問題ないはず。

後述の通り、Date#format、Number#formatの実装に加え、String.formatも書式指定子サポートを追加して実装しなおした。

Formattableインターフェイス

Date、Numberとも似たようなことをするので、formatメソッドはFormattableオブジェクトに実装し、Date.prototoyep、Number.prototypeへ重ねるようにした。 また、書式指定子の定義をそれぞれのコンストラクタ関数のメンバ「formatters」として定義し、formatメソッド内からthis.constructor経由で参照させている。 具体的な実装は以下の通り。

var Formattable = {
	defaultFormat : "",
	format : function(format) {
		var formatters = this.constructor.formatters || [];
		
		return formatters.inject( format || this.defaultFormat, function(result, formatter) {
			return result.replace( formatter.pattern, function() {
				return formatter.format.apply( this, [ this ].concat( $A( arguments ) ) );
			}.bind( this ) );
		}.bind( this ) );
	}
}

書式指定子の基本設計

pattern（RegExp）プロパティとformatメソッドをメンバに持つオブジェクトを定義した。

formatメソッドの第一引数はフォーマット対象の値、第二引数以降にpatternプロパティの正規表現でexecした結果が渡される。例えばDate向けの年フォーマットは

{
	pattern : /yyyy|yy|y/,
	format : function(value, pattern) {
		return pattern.length == 1 ?
			value.getFullYear().toString() :
			( "0000" + value.getFullYear() ).slice(-1 * pattern.length);
	}
}

Date、Numberとも同一の設計のフォーマット情報を配列で持たせ、それをループ処理で適用している。

Dateの書式指定子

dateformat.jsに酷似しているが、ミリ秒の指定方法と解釈が若干違う

Numberの書式指定子

3桁のカンマ区切り書式、ゼロ詰、および桁数指定の16進数の書式を定義している。

テスト

宿題

• パースメソッドの実装 → 今のformattersの定義を流用したいが方法が浮かばないorz
• Number#formatのパーセント対応 → なくてもいいけど

Ext.jsにString.formatあるじゃん

「String.format.apply」という変わったキーワードでこのブログにたどり着いた人がいたみたいで、他にどんなんひっかかるかなと思ってぐーぐる先生に尋ねてみた。こちら。

するとここのブログのエントリの他にExt JS（旧：yui-ext）関連が引っかかる。おりょ？

最初に目に付いたyui-ext0.40-alpha時の「yutil.js」を覗いたら、なんか、まんま「String.format」メソッドてのがあるじゃないですか。

String.format( "{0} ms", milli );

いちおう現在（＝Ext JS）でどうなってるか探したら、「Ext.js」中にやっぱりまんま定義されてるし。

まいったなー、こんな有名ドコのライブラリとモロかぶるとは...

まあ、おおもとの発想は.NETだし、あるっちゃあるものなのかなぁ。

ちなみにExtのやつはここの以前のバージョンと同じく書式指定子はなく、単純にパラメータ位置に対するプレースホルダ置換のみなんだけどね。ふぅ。

またEnjoy*Studyさんの後追いかよ...

Date#formatのミリ秒フォーマットの実装部分で疑問を持ったのだが、Number#toFixedの丸め方が実装依存みたいだ。ちょっと気になって検索したら、dateformat.jsの作者さんがやはり「Number#toFixedがブラウザによって結果が異なる場合がある」なんてエントリをあげておられた。つくづく後追いしてるな ＞ 俺

まあ、がんばって調べてみるか。

Under Translation of ECMA-262 3rd Editionを一生懸命読んでみる

一旦読んで「さっぱりだぜ」とあきらめていたがもう一度Nuber.prototype.toFixedのところを読み直し、Enjoy*Studyさんが例示しておられたパターンでどうなるかを確認してみた。

• ステップ1から。対象の数値が「1.255」、toFixedのパラメータが「2」なので、f = 2、x = 1.255となる。0 <= f <= 20 且つ ! isNaN( x ) 且つ 0 <= x <= Math.pow( 10, 21 ) を満たすのでステップ10へ
• n / Math.pow( 10, f ) - x が限りなく0に近くなることを満たす整数nを考える。 → n / Math.pow( 10, 2 ) - 1.255 → n / 100 - 1.255 なので、n は 125 か 126 あたりか。
• 「そのようなnが2個あれば、大きいほうをnとする」とあるので一旦 126 か？とも思ったが、「厳密な数学値が限りなく0に近い」とあるので、1.26 - 1.255と1.25 - 1.255の絶対値を見てみることに。
• Math.abs( 1.26 - 1.255 ) // → 5.00000000000012E-03（JScript）、0.0050000000000001155（Firefox）
• Math.abs( 1.25 - 1.255 ) // → 4.99999999999989E-03（JScript）、0.004999999999999893（Firefox）
• ということで、n は 125となり、n != 0 なのでm = 125で確定。（たぶん）
• 後はステップ13 → 14 → 18 とすなおに解釈すると、(1.255).toFixed(2) = 1.25 となる。

結論

IEのNumber#toFixedは仕様と違う

...とはいっても、dara-jの解釈が間違ってるかもしんないし...