NEW ARTICLE
draw.io ズームイン・ズームアウトを行うショートカットキー
  1. HOME
  2. javascript
  3. javascript 文字列を数値型に変更する

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

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

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

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.66
Javascript サンプル集はこちら

Number使い方

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

Number(文字列);

Number使い方

let str = '123.456';

let result = Number(str);

console.log( result );// 123.456
console.log( typeof result ); // number
typeofについて

その他の数値や、文字列以外に適応した結果は以下の通りとなります。

console.log( `${Number('0')} : ${typeof Number('0')}` ); // 0 : number
console.log( `${Number('-1')} : ${typeof Number('-1')}` ); // -1 : number
console.log( `${Number('10n')} : ${typeof Number('10n')}` ); // NaN : number

console.log( `${Number(10n)} : ${typeof Number(10n)}` ); // 10 : number

console.log( `${Number(true)} : ${typeof Number(true)}` ); // 1 : number
console.log( `${Number(false)} : ${typeof Number(false)}` ); // 0 : number

console.log( `${Number([1,2])} : ${typeof Number([1,2])}` ); // NaN : number

console.log( `${Number({a:1})} : ${typeof Number({a:1})}` ); // NaN : number

console.log( `${Number(NaN)} : ${typeof Number(NaN)}` ); // NaN : number
console.log( `${Number(null)} : ${typeof Number(null)}` ); // 0 : number
console.log( `${Number(undefined)} : ${typeof Number(undefined)}` ); // NaN : number
${}(テンプレートリテラル)の使い方

parseIntを使用

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

parseInt(文字列,基数);

parseInt使い方

let str = '123.456';

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

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

また「parseInt」にも、その他の数値や文字列以外に適応した結果は以下の通りとなります。

console.log( `${parseInt('0',10)} : ${typeof parseInt('0',10)}` ); // 0 : number
console.log( `${parseInt('-1',10)} : ${typeof parseInt('-1',10)}` ); // -1 : number
console.log( `${parseInt('10n',10)} : ${typeof parseInt('10n',10)}` ); // 10 : number

console.log( `${parseInt(10n,10)} : ${typeof parseInt(10n,10)}` ); // 10 : number

console.log( `${parseInt(true,10)} : ${typeof parseInt(true,10)}` ); // NaN : number
console.log( `${parseInt(false,10)} : ${typeof parseInt(false,10)}` ); // NaN : number

console.log( `${parseInt([10,20],10)} : ${typeof parseInt([1,2],10)}` ); // 10 : number

console.log( `${parseInt({a:1},10)} : ${typeof parseInt({a:1},10)}` ); // NaN : number

console.log( `${parseInt(NaN,10)} : ${typeof parseInt(NaN,10)}` ); // NaN : number
console.log( `${parseInt(null,10)} : ${typeof parseInt(null,10)}` ); // NaN : number
console.log( `${parseInt(undefined,10)} : ${typeof parseInt(undefined,10)}` ); // NaN : number

parseFloatを使用

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

parseFloat(文字列);

parseFloat使い方

let str = '123.456';

let result = parseFloat(str);

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

また「parseFloat」にも、その他の数値や文字列以外に適応した結果は「parseInt」と同じになります。

console.log( `${parseFloat('0')} : ${typeof parseFloat('0')}` ); // 0 : number
console.log( `${parseFloat('-1')} : ${typeof parseFloat('-1')}` ); // -1 : number
console.log( `${parseFloat('10n')} : ${typeof parseFloat('10n')}` ); // 10 : number

console.log( `${parseFloat(10n)} : ${typeof parseFloat(10n)}` ); // 10 : number

console.log( `${parseFloat(true)} : ${typeof parseFloat(true)}` ); // NaN : number
console.log( `${parseFloat(false)} : ${typeof parseFloat(false)}` ); // NaN : number

console.log( `${parseFloat([10,20])} : ${typeof parseFloat([1,2])}` ); // 10 : number

console.log( `${parseFloat({a:1})} : ${typeof parseFloat({a:1})}` ); // NaN : number

console.log( `${parseFloat(NaN)} : ${typeof parseFloat(NaN)}` ); // NaN : number
console.log( `${parseFloat(null)} : ${typeof parseFloat(null)}` ); // NaN : number
console.log( `${parseFloat(undefined)} : ${typeof parseFloat(undefined)}` ); // NaN : number

その他

演算して、変換可能です。「0」を足す。

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

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

「1」を掛ける。

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

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

その他の数値や文字列以外に適応した結果は、以下となります。

console.log( `${'0' - 0 } : ${typeof ('0' - 0 )}` ); // 0 : number
console.log( `${'-1' - 0 } : ${typeof ('-1' - 0 )}` ); // -1 : number
console.log( `${'10n' - 0 } : ${typeof ('10n' - 0 )}` ); // NaN : number

// console.log( `${10n - 0 } : ${typeof (10n - 0 )}` ); 
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions

console.log( `${true - 0 } : ${typeof (true - 0 )}` ); // 1 : number
console.log( `${false - 0 } : ${typeof (false - 0 )}` ); // 0 : number

console.log( `${[10,20] - 0 } : ${typeof ([1,2] - 0 )}` ); // NaN : number

console.log( `${{a:1} - 0 } : ${typeof ({a:1} - 0 )}` ); // NaN : number

console.log( `${NaN - 0 } : ${typeof (NaN - 0 )}` ); // NaN : number
console.log( `${null - 0 } : ${typeof (null - 0 )}` ); // 0 : number
console.log( `${undefined - 0 } : ${typeof (undefined - 0 )}` ); // NaN : number

参考

ちなみに、文字列の数値に区切り文字を使用した場合は、どれも正しく機能しません。

let str = '123_456';

console.log( Number(str) ); // NaN
console.log( parseInt(str) ); // 123
console.log( str - 0 ); // NaN
数値を区切り文字（アンダーバー）で区切って使用する

サンプルコード

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

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

<!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:150px">

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

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

    <button onclick="hoge()" type="button" class="btn btn-raised btn-success mt-1">
      変換
    </button>
  </div>

  <script>

    function hoge() {

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

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

      // 変換後の型を表示
      let result = Number(elm.value);
      document.getElementById('disp2').textContent = typeof result;

    }

  </script>
</body>

</html>

変換されていることが確認できます。

また、javascript部はdocument.getElementByIdを省略して「id名」だけで記述することも可能です。

function hoge() {

  disp.textContent = typeof txt.value;

  let result = Number(txt.value);
  disp2.textContent = typeof result;

}