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

javascriptで、Number(), parseInt(), parseFloat()を使用して、文字列を数値型に変更するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ firefox 80.0.1
Number使い方
Numberを使うと、文字列を数値型に変更することが可能です。
Number(文字列);
Number使い方
var str = '123.456';
var result = Number(str);
console.log( result );// 123.456
console.log( typeof result ); // number
parseInt使い方
parseIntを使うと、文字列を数値型に変更することが可能ですが小数点以下は切り捨てられてしまいます。
parseInt(文字列,基数);
parseInt使い方
var str = '123.456';
var result = parseInt(str, 10); // 10進数
console.log( result ); // 123
console.log( typeof result ); // number
parseFloat使い方
parseFloatも、文字列を数値型に変更することが可能です
parseFloat(文字列);
parseFloat使い方
var str = '123.456';
var result = parseFloat(str);
console.log( result ); // 123.456
console.log( typeof result ); // number
その他
演算して、変換可能です。「0」を足す。
var str = '123.456';
var result = str - 0;
console.log(result);// 123.456
console.log(typeof result); // number
「1」を掛ける。
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>
変換されていることが確認できます。

また、javascript部はdocument.getElementByIdを省略して記述することも可能です。
function hoge() {
disp.textContent = typeof txt.value;
var result = Number(txt.value);
disp2.textContent = typeof result;
}
-
前の記事
CentOs8 ssldumpをインストールする 2020.11.15
-
次の記事
npm ERR! cb() never called!が発生した場合の対処法 2020.11.16
コメントを書く