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

JavaScriptで16進数をフォーマットする方法【ゼロ埋めとハイフン区切りの実装例】

JavaScriptで数値を16進数に変換し、決まった形式でフォーマットしたいケースはよくあります。基本的な手順は以下の2段階です。

  1. まず、数値を先頭がゼロで埋められた16進数文字列に変換します。
  2. 次に、その文字列にハイフン（-）を挿入して、目的の形式に整形します。

実装例

以下のコードでは、数値 32122 を16桁の16進数文字列に変換し、「8桁-4桁-4桁」の形式にフォーマットしています。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var num = 32122;
         // 数値を16進数に変換し、先頭をゼロで埋めて16桁にする
         var myHex = ("000000000000000" + num.toString(16)).substr(-16);

         // ハイフンで区切って「8桁-4桁-4桁」の形式に整形
         var resHex = myHex.substr(0, 8)+'-'+myHex.substr(8,4)+'-'+myHex.substr(12,4);
         document.write(resHex);
      </script>
   </body>
</html>

出力結果

00000000-0000-7d7a

コードのポイント

  • num.toString(16)：数値を16進数の文字列に変換します。
  • ("000000000000000" + ...).substr(-16)：変換後の文字列の先頭にゼロを連結し、末尾から16文字分だけ切り出すことで、必ず16桁のゼロ埋め文字列を作ります。
  • substr() の組み合わせ：位置を指定して文字列を分割し、ハイフンで連結することでGUID風のフォーマットを実現しています。

モダンな書き方（padStart を使う方法）

ES2017以降の環境では、padStart() を使うことでより直感的にゼロ埋めができます。

const num = 32122;
const myHex = num.toString(16).padStart(16, '0');
const resHex = `${myHex.slice(0, 8)}-${myHex.slice(8, 12)}-${myHex.slice(12)}`;
console.log(resHex); // 00000000-0000-7d7a

このように、ゼロ埋めと文字列操作を組み合わせるだけで、16進数を見やすい形式にフォーマットできます。用途に応じて桁数や区切り位置を変更すれば、さまざまな形式に対応可能です。

  1. 【JavaScript】MySQLのDATETIME値をJSON形式に変換する方法を解説

    MySQL DATETIME値をJSON形式に変換する基本手法MySQLのDATETIME値をJavaScriptでJSON形式に変換するには、JSON.stringify()メソッドを使用します。手順としては、まずDateオブジェクトとして日時を取得し、年・月・日・時・分・秒をそれぞれ取り出してオブジェクトにまとめ、最後にJSON文字列へ変換します。サンプルコード以下は、MySQLのDATETIME値をJSON形式に変換するJavaScriptのコード例です。<script>var mySQLDateTime = new Date(Fri Sep 06 2019 22:54:48

  2. JSPで数値をフォーマットする方法｜fmt:formatNumberタグの使い方を解説

    JSTL（JSP Standard Tag Library）の<fmt:formatNumber>タグは、数値・パーセント・通貨などを指定した形式で整形して表示するために使用します。金額の桁区切りや小数点以下の桁数制御など、Webアプリケーションの画面表示に欠かせないフォーマット処理を、スクリプトレットを書かずに簡単に実現できるのが特徴です。 fmt:formatNumberタグの主な属性 <fmt:formatNumber>タグには、以下の属性が用意されています。 属性説明必須デフォルト値 value表示する数値はいなし typeNUMBER（数値）、CURR