6.2 書式付き出力

これまで見てきたように、JavaScriptでは style プロパティに値を代入することで、動的にスタイルシートを変化させることができる。
ユーザーが見やすいように、数字をカンマ区切りにするとか、16進数で表記したいときには、専用メソッドや外部ライブタリを使って実現する。

サンプル・プログラムの実行例

output4.html を実行

サンプル・プログラム

ダウンロード

圧縮ファイルの内容
output4.html	書式付き出力

output4.html 更新履歴
バージョン	更新日	内容
1.1.0	2023/08/14	制御構造を見直した
1.0	2021/08/21	初版

toLocaleStringメソッド

Number型のデータをカンマ区切りで表示したいときは、これまでにも何度か登場したが、toLocaleString メソッドを使う。

68: //toLocaleString()
69: document.getElementById('output1').innerHTML = 'toLocaleString() : ' + OUTPUT1.toLocaleString();

sprintf関数

C言語には printf関数というものがあり、数値や文字列を書式付きで表示するのに重宝する。JavaScriptには同様関数がないのだが、航海ライブラリ CDN（Content Delivery Network）に sprintf関数がある。今回は、この関数ライブラリを利用する。
JavaScriptは、こうした外部ライブラリをインターネット経由で簡単に利用できるところが便利だ。

16: 
17: <script src="https://cdnjs.cloudflare.com/ajax/libs/sprintf/1.1.2/sprintf.min.js"></script>

  71:     //sprintf()：外部ライブラリ
  72:     let today = new Date();
  73:     let str = sprintf('%d/%02d/%02d', today.getFullYear(), today.getMonth() + 1, today.getDate());
  74:     document.getElementById('output2').innerHTML = 'sprintf() : ' + str;
  75:

sprintf 関数はC言語のそれとほぼ同じで、第1引数に書式指定子を渡す。
たとえば '%d/%02d' は、書式指定しに続く第2引数の値を整数（%d）として出力し、第3引数の値は0埋めの2桁整数（%02d）として出力する。両者の間にあるスラッシュ '/' は、そのまま文字列として出力する。
%04x は16進表示で、0埋め4桁。
%5.2f は小数表示で、全体が5桁、小数部が2桁。
%c は1文字。
%s は文字列。

sprintf()の書式指定子
指定子	データ型	説明	使用例
%c	文字型	1文字を出力。	%c
%s	文字列型	文字列を出力。	%10s, %-10s
%d	整数型	10進整数を出力。	%2d, %04d
%u	整数型	符号無し10進整数を出力。	%4u
%x	整数型	16進整数を出力。	%04x
%d	実数型	実数を出力する。	%5.2%, %.4f
%e	実数型	実数を指数表示で出力。	%5.3e
%g	実数	実数を最適形式で出力。	%g

substr関数と文字列の折りたたみ

長大な文字列を表示するとき、その一部だけを表示しておき、文字列をクリックすると全体が表示されるというアクションを組み込むことがある。

  76:     //substr()
  77:     let str2 = OUTPUT3.substr(0, 20);
  78:     let str3 = '<span class="expand" onclick="expand()">...</span>';
  79:     document.getElementById('output3').innerHTML = str2 + str3;
  80: }
  81: </script>
  82: <style>
  83: .expand {
  84:     color: blue;
  85:     font-weight: bold;
  86: }
  87: </style>
  88: </head>
  89:

  41: /**
  42:  * 文字列展開表示
  43:  * @param   なし
  44:  * @return  なし
  45: */
  46: function expand() {
  47:     document.getElementById('output3').innerHTML = OUTPUT3;
  48: }