【TypeScript初心者でも安心】文字列を数値に変換する3つの方法と各方法の使い分け、さらに役立つ豆知識まで徹底解説
2024-04-02
TypeScriptで文字列を数値に変換する方法
Number() 関数は、文字列を数値に変換する最も簡単な方法です。
const str = "123";
const num = Number(str); // 123
console.log(num); // 123
parseInt() 関数は、文字列を10進数の整数に変換します。
const str = "123.45";
const num = parseInt(str); // 123
console.log(num); // 123
const str = "123.45";
const num = parseFloat(str); // 123.45
console.log(num); // 123.45
各方法の注意点
Number()関数は、文字列の先頭から数値に変換できる部分のみを抽出します。そのため、文字列の末尾に文字が含まれている場合は、その部分は無視されます。
例
const str1 = "123abc";
const num1 = Number(str1); // 123
const str2 = "abc123";
const num2 = parseInt(str2); // NaN
const str3 = "123.45abc";
const num3 = parseFloat(str3); // 123.45
TypeScriptで文字列を数値に変換するには、Number() 関数、parseInt() 関数、parseFloat() 関数の3つの方法があります。それぞれの方法の特徴を理解して、状況に応じて使い分けることが重要です。
// 文字列を数値に変換する3つの方法
const str1 = "123";
const num1 = Number(str1); // 123
const str2 = "123.45";
const num2 = parseInt(str2); // 123
const num3 = parseFloat(str2); // 123.45
const str3 = "abc123";
const num4 = Number(str3); // NaN
const num5 = parseInt(str3); // NaN
const num6 = parseFloat(str3); // NaN
console.log(num1); // 123
console.log(num2); // 123
console.log(num3); // 123.45
console.log(num4); // NaN
console.log(num5); // NaN
console.log(num6); // NaN
123
123
123.45
NaN
NaN
NaN
解説
str1は数値のみを含む文字列です。Number()関数、parseInt()関数、parseFloat()関数のいずれを使用しても、123という数値に変換されます。str2は小数点を含む数値を含む文字列です。Number()関数とparseFloat()関数は、123.45という数値に変換されます。parseInt()関数は、小数点以下の部分は無視して、123という数値に変換されます。
+ 演算子は、数値と文字列を演算すると、文字列を数値に変換します。
const str = "123";
const num = +str; // 123
console.log(num); // 123
BigInt 型は、大きな整数を表す型です。BigInt 型の文字列リテラルは、数値に変換されます。
const str = "12345678901234567890";
const num = BigInt(str); // 12345678901234567890n
console.log(num); // 12345678901234567890n
ライブラリを使う
lodash などのライブラリには、文字列を数値に変換する関数があります。
import _ from "lodash";
const str = "123";
const num = _.toNumber(str); // 123
console.log(num); // 123
BigInt型は、大きな整数を表す型です。そのため、数値が大きすぎる場合は、BigInt型に変換できない可能性があります。- ライブラリを使う場合は、ライブラリのドキュメントをよく読んでから使用するようにしてください。
typescript
