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

JavaScriptで数値の各桁の数字を一つずつ分割表示する方法

はじめに

この記事では、ユーザーが入力した数値を検証し、有効な数値であればその各桁の数字を画面に一つずつ表示するJavaScriptプログラムの作り方を解説します。

動作イメージ

ページ上のボタンをクリックすると入力ダイアログが開き、そこに数値を入力してOKを押すと、入力された数値の各桁が一行ずつ画面に出力される仕組みです。

例えば、入力が次のような場合——

43354

画面には次のように表示されます。

4
3
3
5
4

完成コード

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Digits</title>
  </head>
<body>
  <div class="column1">
    <div class="input">
      <button onclick="perform()">Enter number</button>
    </div>
    <strong><div id="output"></div></strong>
  </div>
</body>
</html>

JavaScript

function perform() {
  var outputObj = document.getElementById("output");
  var a = parseInt(prompt("Please enter a number: ", ""));
  var digit = "";
  outputObj.innerHTML = "";
  while (a > 0) {
    let num = a % 10;
    a = Math.floor(a / 10);
    digit += "<p>" + num + "</p>";
  }
  outputObj.innerHTML = digit;
  document.getElementsByTagName("button")[0].setAttribute("disabled", "true");
}

OKボタンをクリックすると、入力された数値の各桁が一行ずつ画面に表示され、同時にボタンが無効化されて再実行できなくなります。

コードの解説

  • 入力の取得： prompt()でユーザーの入力を受け取り、parseInt()で整数に変換しています。
  • 一桁ずつの取り出し： a % 10（剰余演算）で一番下の桁を取得し、Math.floor(a / 10)でその桁を切り捨てます。この処理をwhileループでaが0になるまで繰り返します。
  • 出力： 取り出した数字を<p>タグで包みながら変数digitに連結し、ループ終了後にinnerHTMLへ一度だけ代入することで、DOM更新を最小限に抑えています。
  • 再クリック防止： 処理完了後にボタンへdisabled属性を設定し、誤って複数回実行されないようにしています。

注意点：出力は逆順になる

この手法は数値の下の桁から順に取り出すため、「43354」と入力した場合の出力は「4・5・3・3・4」となり、元の数値とは逆の並びになります。また、負の数や小数を入力するとparseIntの結果がループ条件を満たさず、何も表示されない点にも留意が必要です。

改善版：split()を使ったシンプルな実装

桁の順序を保ちたい場合や、より簡潔に書きたい場合は、数値をいったん文字列に変換してsplit()で一文字ずつ分割する方法が便利です。当初の要件にあった「入力が有効な数値かどうかの判定」も合わせて組み込めます。

function perform() {
  var outputObj = document.getElementById("output");
  var input = prompt("Please enter a number: ", "");

  // 入力がキャンセル・空・無効な数値の場合はメッセージを表示して終了
  if (input === null || input.trim() === "" || isNaN(Number(input))) {
    outputObj.innerHTML = "<p>有効な数値を入力してください。</p>";
    return;
  }

  outputObj.innerHTML = Number(input)
    .toString()
    .replace("-", "") // 負の数の場合はマイナス記号を除外
    .split("")
    .map(function(d){ return "<p>" + d + "</p>"; })
    .join("");
}

この方法なら、元の数値と同じ順序で「4・3・3・5・4」と表示され、負の数にも対応できます。コード量も減り、処理の意図も伝わりやすくなります。

まとめ

数値の桁を分割する基本は「% 10で末尾の桁を取り出し、Math.floor(a / 10)で桁を落とす」という繰り返し処理です。一方、桁の順序を保ちたい場合やコードを簡潔にしたい場合はString.prototype.split()を活用するのがおすすめです。用途に応じて両者の方法を使い分けてみてください。


  1. JavaScriptのNumber()関数とは？使い方とサンプルコードを解説

    JavaScriptのNumber()関数は、引数として渡された値やオブジェクトを、それに対応する数値へ変換するための関数です。真偽値や文字列型の数字、さらにはDateオブジェクトなども数値に変換できるため、データ型の変換処理において非常に便利な組み込み関数の一つです。例えば、Number(true)は「1」、Number(false)は「0」を返します。また、数字のみで構成された文字列「149」を渡せば数値の149に変換され、new Date()で生成した日付オブジェクトを渡すと、1970年1月1日からの経過ミリ秒数が返されます。以下に、Number()関数の動作を確認できるサンプルコードを

  2. JavaScriptで数字パターンを表示する方法【初心者向けサンプルコード】

    本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。(n = 5 の場合の出力例)01 01 02 01 02 03 01 02 03 04 01 02 03 04 05仕組みのポイントこのパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進む