javascript 数値から一番最後の数値を取得する

作成日 2022.09.24
javascript
javascript

javascriptで、数値から一番最後の数値を取得するサンプルコードを記述してます。

1. 環境
2. 数値から一番最後の数値を取得
3. サンプルコード

環境

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

Javascript サンプル集はこちら

数値から一番最後の数値を取得

数値から一番最後の数値を取得するには、文字列化して「slice」を使用することで可能です。

const num = 123456

console.log( String(num).slice(-1) ); // 6

// 数値に戻す場合は「Number」を使用
console.log( Number(String(num).slice(-1)) ); // 6

少数でも同様に取得可能です。

const num = 123.456

console.log( String(num).slice(-1) ); // 6

// 数値に戻す場合は「Number」を使用
console.log( Number(String(num).slice(-1)) ); // 6

マイナスでも取得されます。

const num = -123.456

console.log( String(num).slice(-1) ); // 6

// 数値に戻す場合は「Number」を使用
console.log( Number(String(num).slice(-1)) ); // 6

「0」が最後の数値の場合は、整数は正しく取得されてますが、少数は文字に変換した際に「0」が除去されるので「0」を除いた数値が取得されます。

const num1 = 1000

console.log( String(num1).slice(-1) ); // 0

// 数値に戻す場合は「Number」を使用
console.log( Number(String(num1).slice(-1)) ); // 0

const num2 = 1000.20

console.log( String(num2) ); // 1000.2

console.log( String(num2).slice(-1) ); // 2

// 数値に戻す場合は「Number」を使用
console.log( Number(String(num2).slice(-1)) ); // 2

サンプルコード

以下は、「取得」ボタンをクリックすると、フォームに入力した数値の最後の値を取得して表示するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。

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

<!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 class="container text-center w-50" style="margin-top:200px">

    <h2><span class="badge badge-primary">結果</span></h2>

    <form>
      <div class="form-group">
        <label class="bmd-label-floating">数値を入力</label>
        <input type="number" id="n">
      </div>
    </form>

    <button type="button" onclick="lastDigit1Num()" class="btn btn-primary mt-1">
      取得
    </button>

  </div>

  <script>

    const lastDigit1Num = () => {

      // 結果を表示
      document.getElementsByClassName("badge")[0].textContent = Number(String(n.value).slice(-1));

    }

  </script>

</body>

</html>

結果が表示されていることが確認できます。