javascript 文字列を数値型に変更する

2020.11.16
javascript
javascript

javascriptで、Number(), parseInt(), parseFloat()を使用して、文字列を数値型に変更するサンプルコードを記述してます。

1. 環境
2. Number使い方
3. parseInt使い方
4. parseFloat使い方
5. その他
6. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ firefox 80.0.1

windows10にApacheのインストール

Number使い方

Numberを使うと、文字列を数値型に変更することが可能です。

Number(文字列);

1	Number(文字列);

Number使い方

var str = '123.456';

var result = Number(str); 
console.log( result );// 123.456
console.log( typeof result ); // number

var str = '123.456';

var result = Number(str);

console.log( result );// 123.456

console.log( typeof result ); // number

parseInt使い方

Numberを使うと、文字列を数値型に変更することが可能ですが小数点以下は切り捨てられてしまいます。

parseInt(文字列,基数);

1	parseInt(文字列,基数);

parseInt使い方

var str = '123.456';

var result = parseInt(str, 10); // 10進数
console.log( result ); // 123
console.log( typeof result ); // number

var str = '123.456';

var result = parseInt(str, 10); // 10進数

console.log( result ); // 123

console.log( typeof result ); // number

parseFloat使い方

parseFloatも、文字列を数値型に変更することが可能です

parseFloat(文字列);

1	parseFloat(文字列);

parseFloat使い方

var str = '123.456';

var result = parseFloat(str); 
console.log( result ); // 123.456
console.log( typeof result ); // number

var str = '123.456';

var result = parseFloat(str);

console.log( result ); // 123.456

console.log( typeof result ); // number

その他

以下のような方法でも変換可能です

var str = '123.456';
var result = str - 0;

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

var str = '123.456';

var result = str - 0;

console.log(result);// 123.456

console.log(typeof result); // number

var str = '123.456';
var result = str * 1;

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

var str = '123.456';

var result = str * 1;

console.log(result);// 123.456

console.log(typeof result); // number

サンプルコード

以下は、
「変換」ボタンをクリックするとフォームに入力された文字列を数値型に変換する
サンプルコードとなります。

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

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

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
  }
</style>
<script>

  function hoge() {

    // ID名「txt」を取得
    var elm = document.getElementById("txt");

    // フォームに入力された値の型を表示
    document.getElementById('disp').textContent = typeof elm.value;
    // 返還後の型を表示
    var result = Number(elm.value);
    document.getElementById('disp2').textContent = typeof result;

  }

</script>

<body>
  <div class="main">

    <h2><span id="disp" class="badge badge-primary">返還前</span></h2>
    <h2><span id="disp2" class="badge badge-primary">返還後</span></h2>

    <div class="form-group">
      <label for="txt" class="bmd-label-floating">テキスト</label>
      <input id="txt" type="txt" class="form-control">
    </div>

    <button onclick="hoge()" type="button" class="btn btn-raised btn-warning">
      変換
    </button>

  </div>
</body>

</html>