• コーディング

【JavaScript】数値を文字列に変換する | 文字列を数値に変換する

  • #JavaScript

こんにちは、まついちです！

ここ最近はUIUXデザインをメインに仕事をしています。
といっても、公開出来るデザインがないので、ほとんどコーディングに絡む記事になってしまってます。。。

さて、今日はJavaScriptで変数の型を数値を文字列に変換、または文字列を数値に変換する方法をご紹介します。
JavaScriptでは変数の型を気にせず記述出来るので、意図しない型になっていることに気づかず、ハマる事があります。

数値を文字列に変換する（String/toString）

String()

String()関数は引数として与えられた値を文字列に変換するために使用します。

let number = 123;

// 型を確認
console.log(typeof(number)); // 結果：number

// 型を変換（数値→文字列）
let numberString = String(number);

// 型を再確認
console.log(typeof(numberString)); // 結果：string

toString()

toString() メソッドはオブジェクトを表す文字列を返すメソッドです。
数値、文字列、配列、オブジェクトなど、多くの組み込み型に対して使用できます。

let number = 123;

// 型を確認
console.log(typeof(number)); // 結果：number

// 型を変換（数値→文字列）
let numberString = number.toString();

// 型を再確認
console.log(typeof(numberString)); // 結果：string

文字列を数値に変換する（Number/ParseInt）

Number()

Number()関数は引数を数値に変換するために使用します。
この関数は数値として解釈出来る場合のみ、対応する数値を返します。
もし、数値に変換出来ない場合はNaN（Not a Number）を返します。

let numberString = '123';

// 型を確認
console.log(typeof(numberString)); // 結果：string

// 型を変換（文字列→数値）
let number = Number(numberString);

// 型を再確認
console.log(typeof(number)); // 結果：number

ParseInt()

parseInt()関数は文字列を整数に変換するために使用される組み込み関数です。
この関数は主に文字列の形式で表された数値を解析して、整数に変換する際に使用します。
特に、文字列が数字で始まる場合にその部分を取り出して整数に変換するのに便利です。
もし文字列が数値で始まらない場合、parseInt() は NaN (Not a Number) を返します。

let numberString = '123';

// 型を確認
console.log(typeof(numberString)); // 結果：string

// 型を変換（文字列→数値）
let number = parseInt(numberString);

// 型を再確認
console.log(typeof(number)); // 結果：number
  • 松浦 一彦

  • 約11年間、事業者会社、制作会社でWEBデザイン、WEBディレクション、GA/GTMを使用したアクセス解析などを経験。
    2022年3月よりフリーランスとして独立。
    現在は業務委託として複数の企業のプロジェクトに参加する傍ら、受託案件を受けたり、自身のブログを運用しています。

    • スキルUI/UX改善、サイト分析、WEBサイト&LPデザイン、コーディング、ディレクション、動画編集、WordPress構築
    • 言語HTML、CSS、Javascript/jQuery、PHP
    • ツールPhotoshop、illustrator、Premiere、After Effect、XD、Figma、Googleアナリティクス

関連記事