JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで数値をカンマ区切り（3桁区切り）で表示する方法

JavaScriptで数値を3桁ごとにカンマで区切って表示するには、Intl.NumberFormatオブジェクトを使用するのが最も簡単で確実な方法です。以下のコードを実行して、その動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <script>
         var number = 24287995;
         document.write(new Intl.NumberFormat().format(number));
      </script>
   </body>
</html>

出力結果

24,287,995

解説

Intl.NumberFormatは、ECMAScript Internationalization APIの一部であり、言語や地域（ロケール）に応じた数値の書式設定を行うための標準的な機能です。引数を指定しない場合は、実行環境のデフォルトロケールが自動的に適用されます。

ロケールを明示的に指定する

特定の表示形式に固定したい場合は、第一引数にロケール文字列を渡します。例えば、英語圏（米国）の形式であるカンマ区切りを明示的に指定するには、次のように記述します。

new Intl.NumberFormat('en-US').format(24287995); // 結果: 24,287,995

toLocaleStringメソッドを使う方法

より簡潔に記述したい場合は、Number.prototype.toLocaleString()メソッドも利用できます。内部的にはIntl.NumberFormatと同じ仕組みが使われているため、結果はほぼ同じになります。

var number = 24287995;
console.log(number.toLocaleString()); // 結果: 24,287,995

いずれの方法でも、金額や統計データなどを読みやすい形式で表示できます。正規表現を使った自作のフォーマット関数を実装する必要はなく、ブラウザ間の互換性にも優れているため、実務ではこれらの標準APIを使うことが推奨されます。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. JavaScriptで<strong>タグにテキストを設定する方法

    Webページ上のテキストを動的に書き換えたい場面は多くあります。この記事では、jQueryを使用して<strong>タグ内のテキストをJavaScriptで変更する方法を、手順とコード例とともにわかりやすく解説します。手順1：<strong>要素を用意するまず、HTML内にテキストを差し替えたい<strong>要素を配置します。後からJavaScript側でこの要素を指定できるよう、id属性を付けておくのがポイントです。<strong id="strongDemo">Replace This strong tag</st