javascript 整数の指定した桁数の数値を取得する

作成日 2022.10.29
javascript
javascript

javascriptで、整数の指定した桁数の数値を取得するサンプルコードを記述してます。基本的には文字列に変換してインデックス番号で位置を指定することで取得することができます。小数には使用できないのが前提なのでif文でチェックしてから使用します。

1. 環境
2. 整数の指定した桁数の数値を取得
3. サンプルコード

環境

OS windows11 pro 64bit
Apache 2.4.43
ブラウザ chrome 107.0.5304.63

Javascript サンプル集はこちら

整数の指定した桁数の数値を取得

整数の指定した桁数の数値を取得するには、一度の文字列に変換してから位置を指定します。

const num = 12345;

// インデックス番号2を指定して、3桁目を取得
const result = String(num)[2];

console.log(result); // 3

console.log(typeof result); // string

// 数値に戻します
console.log(Number(result)); // 3

console.log(typeof Number(result)); // number

少数に使用するとカンマが取得されます。これを、数値に変換すると「NaN」が返ります。
なので小数が入った数値には使用できません。

const num = 12.345;

const result = String(num)[2];

console.log(result); // .

console.log(typeof result); // string

console.log(Number(result)); // NaN

console.log(typeof Number(result)); // number

また、範囲を超えたインデックス番号を指定すると「undefined」となります。

const num = 12345;

const result = String(num)[5];

console.log(result); // undefined

console.log(typeof result); // undefined

console.log(Number(result)); // NaN

console.log(typeof Number(result)); // number

なので、簡単な条件を指定してから使用します。

// 第二引数は桁数
function getNum(num,dig){

  // 整数かつ桁数が文字数を上回らないことを条件に指定
  if(Number.isInteger(num) && dig <= num.toString().length){
    const result = String(num)[dig-1];
    console.log(result);
  }else{
    console.log('不正な数値です');
  }

}

const num = 12345;

// 3桁目を取得
getNum(num,3); // 3

// 4桁目を取得
getNum(num,4); // 4

// 5桁目を取得
getNum(num,5); // 5

// 6桁目を取得
getNum(num,6); // 不正な数値です

サンプルコード

以下は、テキストフォームに数値から指定した位置の数値を取得して表示するだけのサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数を使用してます。

document.getElementByIdの省略して記述する

アロー関数の使い方

三項演算子を使ってif文を1行で書く

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div id="foo" class="container text-center w-25" style="margin-top:150px">

    <h2><span id="result" class="badge badge-primary">実行結果</span></h2>

    <input id="txt1" type="number" class="form-control" placeholder="数値"/>
    <input id="txt2" type="number" class="form-control" placeholder="桁数" />

    <button id="btn" type="button" class="btn btn-primary btn-rounded mt-1">
      実行
    </button>

  </div>

  <script>    

    btn.onclick = () => {      

      result.textContent =  String(txt1.value)[txt2.value];

    }
    
  </script>
</body>

</html>

取得されていることが確認できます。