広告

この広告は30日以上更新がないブログに表示されております。
新規記事の投稿を行うことで、非表示にすることが可能です。
posted by fanblog

javascript numeric comma処理:品質面で安心できる

数値をコンマ区切りで表現するのは、基本中の基本です。

1234567890 => 1,234,567,890

サーバーサイドでは、数値にカンマ区切りを挿入してくれる便利な関数が標準で用意されています。
phpの場合:number_format( $num );
C#の場合: (1234567890).ToString("#,##0");

クライアントサイドであるブラウザ側では、
サーバーサイドで生成されたコンマ区切り文字列をそのまま表示するのが一番簡単です。

なぜなら、javascriptでは標準でコンマ区切り書式にする関数が存在しません。

また、以前CSSで数値を表示上カンマとして表示する仕組みも検討されていたようですが、一向に進んでいないようです。


javascriptで数値をコンマ区切りする方法 javascript number comma


javascript toLocaleString()

var n = 1234567890;n.toLocaleString();

safari系(ipad/iphone/osx)ではうまくいきません。safari系無視でOKな要件の場合、もっとも簡単な方法です。

javascript 正規表現でコンマ区切り

function numberWithCommas(x) {
var parts = x.toString().split(".");
return parts[0].replace(/\B(?=(\d{3})+(?=$))/g, ",") + (parts[1] ? "." + parts[1] : "");
}

正規表現で区切りを挿入するパターン、ループしてカンマを入れるパターンなどがあります。
これらのデメリットは、すべて自作のため、品質の問題が付きまといます。

javascript 有名な外部ライブラリを利用する
現時点では、この有名所の外部ライブラリを利用するのがオススメです。
その理由は、いろいろな方がつかっているので、関数の信頼性が高いことにあります。

オススメはd3.format
公式サイト: http://d3js.org/

スクリプトの読み込み(CDNパターン)
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

カンマ区切りする方法
var num1 = d3.format(",")(1234567890);
var num2 = d3.format(",.2f")(1234567890); // 小数2桁

詳しい書式は、以下を参照してください。
https://github.com/mbostock/d3/wiki/Formatting

D3はデータを可視化する(グラフなど)ためのエンジン的なライブラリです。
利用者もたくさんいるので品質面で安心です。

d3.timeという日時系書式も存在します。
posted by scripts at 09:30 | Comment(0) | TrackBack(0) | javascript

Seesaa系ブログ、本文にscript srcを指定するとabout:blankに変換される件

無料のブログ、例えばこのファンブログなどのSeesaa系ブログでは、
<script src="http://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js" type="text/javascript">
などとsrc付きのscriptを本文・追記などに埋め込んで投稿した場合

記事を表示する際に、サーバー側で変換されてしまいます。

変換された結果は、
<script src="about:blank" type="text/javascript">
src="about:blank" 、指定したはずのURLが消えています バッド(下向き矢印)

httpというキーワードがサーバー側のキーになっているような挙動をしています。

httpやhttpsといったプロトコル指定はjavascript/imgタグ/スタイルシートなど外部のファイルを指定する際省くことができます。

2015/3現在は、http:を除いたURLを指定する方法で、本文、追記にjavascript外部ソースを指定することができました。
<script src="http://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js" type="text/javascript">
  ↓ http:を除去
<script src="//raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js" type="text/javascript"></script>



posted by scripts at 23:09 | Comment(0) | TrackBack(0) | javascript
最新記事
最新コメント
タグクラウド
カテゴリアーカイブ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。