<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>bulkitem.com &#187; web</title>
	<atom:link href="http://www.bulkitem.com/tag/web/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bulkitem.com</link>
	<description>bulkitem archives</description>
	<lastBuildDate>Mon, 19 Jul 2010 17:26:47 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.bulkitem.com/tag/web/feed/" />
		<item>
		<title>PHPのnumber_format関数をjavascriptで実装する</title>
		<link>http://www.bulkitem.com/2008/12/05/php%e3%81%aenumber_format%e9%96%a2%e6%95%b0%e3%82%92javascript%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/</link>
		<comments>http://www.bulkitem.com/2008/12/05/php%e3%81%aenumber_format%e9%96%a2%e6%95%b0%e3%82%92javascript%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/#comments</comments>
		<pubDate>Thu, 04 Dec 2008 16:25:14 +0000</pubDate>
		<dc:creator>ishikawa</dc:creator>
				<category><![CDATA[IT]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.bulkitem.com/?p=20</guid>
		<description><![CDATA[以下のPHPのソースをjavascriptで 実行したい場合は、どのように 記述すれば宜しいでしょうか？ &#8211; 人力検索はてな を読んで。
要するにPHPのnumber_format関数をjavascriptで [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://q.hatena.ne.jp/1228298665" target="_blank">以下のPHPのソースをjavascriptで 実行したい場合は、どのように 記述すれば宜しいでしょうか？ &#8211; 人力検索はてな</a> を読んで。</p>
<p>要するにPHPのnumber_format関数をjavascriptで作って欲しいという話。javascriptで使いたいシーンというのを余り思いつかないのだけど、実装するのは別に難しくは無い。</p>
<p>一応PHPのnumber_formatを説明しておくと、例えば number_format(12000, 2) をすると、12,000.00 が返ってくる。位取りのカンマと数値の丸めを行う関数。詳しくは<a href="http://jp2.php.net/manual/ja/function.number-format.php" target=_blank">PHP: number_format &#8211; Manual</a>を見てください。</p>
<p>これをNumberオブジェクトのメソッドとして number_format と同様に汎用性を持たせた物を追加して、フォーマットされた文字列を返すようにすれば、使いやすいはず。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre></td><td class="code"><pre class="javascript javascript" style="font-family:monospace;">Number.<span style="color: #660066;">prototype</span>.<span style="color: #660066;">format</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>dec<span style="color: #339933;">,</span> c<span style="color: #339933;">,</span> p<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>dec<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> dec <span style="color: #339933;">=</span> 0; <span style="color: #009900;">&#125;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>c<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> c <span style="color: #339933;">=</span> <span style="color: #3366CC;">','</span>; <span style="color: #009900;">&#125;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span><span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span> <span style="color: #339933;">==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> p <span style="color: #339933;">=</span> <span style="color: #3366CC;">'.'</span>; <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> place <span style="color: #339933;">=</span> Math.<span style="color: #660066;">pow</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">10</span><span style="color: #339933;">,</span> dec<span style="color: #009900;">&#41;</span>;
  <span style="color: #003366; font-weight: bold;">var</span> num <span style="color: #339933;">=</span> Math.<span style="color: #660066;">round</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span> <span style="color: #339933;">*</span> place<span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> place;
  <span style="color: #003366; font-weight: bold;">var</span> values <span style="color: #339933;">=</span> num.<span style="color: #660066;">toString</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">split</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'.'</span><span style="color: #009900;">&#41;</span>;
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>values.<span style="color: #660066;">length</span> <span style="color: #339933;">==</span> <span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> values.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span>; <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>values<span style="color: #009900;">&#91;</span>0<span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> <span style="color: #009900;">&#40;</span>values<span style="color: #009900;">&#91;</span>0<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> values<span style="color: #009900;">&#91;</span>0<span style="color: #009900;">&#93;</span>.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/^(-?\d+)(\d{3})/</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'$1'</span> <span style="color: #339933;">+</span> c <span style="color: #339933;">+</span> <span style="color: #3366CC;">'$2'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>;
  <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span>dec <span style="color: #339933;">!=</span> values<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span>.<span style="color: #660066;">length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> values<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">+=</span> <span style="color: #3366CC;">'0'</span>; <span style="color: #009900;">&#125;</span>
  <span style="color: #000066; font-weight: bold;">return</span> values.<span style="color: #660066;">join</span><span style="color: #009900;">&#40;</span>p<span style="color: #009900;">&#41;</span>;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>これを使うと以下の様になる。(引数の取り順が number_formatとは異なります)</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="javascript javascript" style="font-family:monospace;">Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">' '</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">','</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 1 344 247,0 (フランス記法対応)</span>
Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;-01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// -1,344,247.00</span>
Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">3</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 1,344,247.001</span>
Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">4</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 1,344,247.0006</span>
Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">5</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 1,344,247.00057</span>
Number<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;+01344247.000570&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">6</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 1,344,247.000570</span></pre></td></tr></table></div>

<p>この Number#format を使ってはてなの人力検索の質問を実装すると以下の様になる。</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="javascript javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> changePrice<span style="color: #009900;">&#40;</span>bbb<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    aaa <span style="color: #339933;">=</span> bbb.<span style="color: #660066;">replace</span><span style="color: #009900;">&#40;</span><span style="color: #009966; font-style: italic;">/,/g</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">''</span><span style="color: #009900;">&#41;</span>;
    aaa <span style="color: #339933;">=</span> Number<span style="color: #009900;">&#40;</span>aaa<span style="color: #339933;">/</span><span style="color: #CC0000;">10000</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">format</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">2</span><span style="color: #009900;">&#41;</span>;
    <span style="color: #000066; font-weight: bold;">return</span> aaa;
<span style="color: #009900;">&#125;</span>
changePrice<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;32546447&quot;</span><span style="color: #009900;">&#41;</span>;<span style="color: #006600; font-style: italic;">// 3,254.64</span></pre></td></tr></table></div>

<p>使うシーンが思い浮かばないとは言ったけど、表示した数値が変化する状況は良くあるので、ある程度大きな数値を扱うなら使う事もあるかもなぁ。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bulkitem.com/2008/12/05/php%e3%81%aenumber_format%e9%96%a2%e6%95%b0%e3%82%92javascript%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.bulkitem.com/2008/12/05/php%e3%81%aenumber_format%e9%96%a2%e6%95%b0%e3%82%92javascript%e3%81%a7%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/" />
	</item>
	</channel>
</rss>
