質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

4683閲覧

javascriptで計算した答えの数値をカンマ区切りにするにはどうすればいいでしょうか

TreesShimi

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/19 06:27

<script> function fnckeisan() { var sss = (document.querySelector('#sss').value); // var asall={"a1":1,"a2":2,"a3":3,"a4":4,"a5":5}; var selecas= asall[document.querySelector('#as').value]; // var ans1=5.1; var ans2=22; var ans3=10; var ans4=5; var ans5=2; switch (selecas) { case 1: x1 = 100 , x2 = 200 ; break; case 2: x1 = 200 , x2 = 400 ; break; case 3: x1 = 300 , x2 = 600 ; break; case 4: x1 = 400 , x2 = 800 ; break; case 5: x1 = 500 , x2 = 1600 ; break; } if (sss >= 300){ ans1 = (sss - 300) * 5 + x1; ans2 = (sss - 300) * 10 + x1; ans3 = (sss - 300) * 15 + x1; ans4 = (sss - 300) * 20 + x1; ans5 = (sss - 300) * 25 + x1; }else if (sss >= 100){ ans1 = (sss - 100) * 5 + x2; ans2 = (sss - 100) * 10 + x2; ans3 = (sss - 100) * 15 + x2; ans4 = (sss - 100) * 20 + x2; ans5 = (sss - 100) * 25 + x2; }else if (sss <= 100){ ans1 = (sss * 1 ) + x1; ans2 = (sss * 2) + x1; ans3 = (sss * 3 ) + x1; ans4 = (sss * 4) + x1; ans5 = (sss * 5 ) + x1; } document.querySelector('#ansall').textContent =`${Math.floor(ans1)} ${Math.floor(ans5)} ${Math.floor(ans3)} ${Math.floor(ans4)} ${Math.floor(ans5)}`; } </script> <form> <td>1番から5番を選んでください</td> <select id="as"> <option value="a1">1番</option> <option value="a2">2番</option> <option value="a3">3番</option> <option value="a4">4番</option> <option value="a5">5番</option> </select> <input type="text" id="sss" value="">数値は?<br> <input type="button" value="計算" onclick="fnckeisan();"> <input type="reset" value="リセット"> <div id="ansall" style="white-space:pre;"></div> </form>

フォームに500と入力したさいに
下のようにコンマなしで表示されます

1100 
5100         
3100              
4100               
5100             

それで下のようにコンマが3桁区切りに表示するようにしたいです

1,100
5,100
3,100
4,100
5,100

どうすれば良いか、ご教授いただけるとありがたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

一般的に想像するアルゴリズムはこんな感じでしょう。

空文字が入った変数を宣言、
数値→文字列→1文字ずつ切って配列→末尾からfor文で回して変数に格納、ただし3の倍数でカンマを加える

JSではIntl.NumberFormatという数値のフォーマット変更用の機能が用意されていますので、特にこねくり回す必要はありません。
対応ブラウザもIE11〜とのことで安心して使えます。

カンマ区切り

冒頭で説明したカンマ区切りです。3桁ごとに区切って表示する場合に使うことができます。
以下は'ja-JP'を指定していますが、'us-EN'や引数なしでも同じように3桁でカンマ区切りします。

JavaScript

1const formatter = new Intl.NumberFormat('ja-JP'); 2formatter.format(1000); 3// => "1,000"

投稿2018/09/19 06:38

miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

TreesShimi

2018/09/19 07:48

すいません、、なにぶん素人なものでよく分からないのですが const formatter = new Intl.NumberFormat('ja-JP'); formatter.format(1000); これは、プログラムのどの部分に当てはめれば良いのでしょうか?
TreesShimi

2018/09/19 08:27

教えていただいたプログラムを、最初に提示したプログラムのどの部分にあてはめても、いろいろと試してみても、表示されるans1~ans5の値はカンマ区切りにならないのです。。。 ちなみにWEB上の検索情報も当然試していますが、NaNで表示されたりしてしまいます。。。
madoka9393

2018/09/19 08:31

横から失礼いたします。 回答にあるリンク等を見ればわかるかもしれませんが、以下のように使用します。 const formatter = new Intl.NumberFormat('ja-JP'); formatter.format(*ここに変換したい値を入れる*);
TreesShimi

2018/09/19 09:00

ご返答ありがとうございます。ただ、これは"ans1"や"ans3"などの変数は当てはめることはできるのでしょうか?”10000”のような実数のみだけでしょうか?私としては計算結果に表示されるans1~ans5の値をカンマ表示したいので、直接こちらで入力した値をカンマ表示したい、というわけではないのです。。。
TreesShimi

2018/09/19 09:35

今ほど解決しました。 var numberWithComma = new Intl.NumberFormat(); 上記の一文を足して 例えば、${Math.floor(ans5)}のところを → ${numberWithComma.format(ans5)}に変えれば、それでOKでした。 簡単なことであるはずなことは予想していましたが、WEB上の情報にさんざん振り回されてしまいました(苦笑)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問