はじめに
以前に書いたTypeScript(JavaScript)におけるnullとundefinedそしてfalsy値の例文で使用されている例文にて、
文字列型から数値型に変換をする際に一部のパターンで厳密にパースできないので、
今回はより安全にパースをする方法を考えてみる。
文字列から数値型へのパース
parseInt()
文字列を整数の数値型に変換する。
parseIntは文字列型でないものも前から変換できるところまでパースしてしまう。
console.log(parseInt('12.3hoge')); // 12
parseFloat()
文字列を少数として数値型に変換する。
parseIntとおなじく先頭から変換できるところまで変換する。
console.log(parseFloat('12.3hoge')); // 12.3
Number()
文字列を数値型に変換する。
変換できない文字が入っているとNaNになる。
nullを渡すと0になる。
console.log(Number('12.3hoge')); // NaN
console.log(Number(12.3)); // 12.3
パースをするならNumber()がいいのか？
parseInt()やparseFloat()は数字じゃない文字列も変換してしまうので、
数字じゃない文字がきたらNaNを出してもらいたい。
そのような時はNumber()がオススメです。
console.log(parseInt('12.3hoge')); // 12
console.log(parseFloat('12.3hoge')); // 12.3
console.log(Number('12.3hoge')); // NaN
しかしNumber()にnullを渡すと、0が返ってきてしまいます。
console.log(Number(null)); // 0
より安全に文字列を数値にパースしたい
なので新しいパース関数を用意しました。
最小構成ですが、やりたいことに合わせて加工して使用していただければと思います。
0文字もNaNにしたい場合は、コメントを外してください。
const parseNumber = (str: string): number => {
if (typeof str !== 'string') return NaN;
// if (str.length === 0) return NaN; // 0文字の場合もNaNにしたい場合
return Number(str);
};
ESlintで従来のパースを禁止する
ESlintでparseInt()とparseFloat()は無効化できるのですが、
Number()の無効化は難しかったです。誰か良い方法があればおしえてください！
eslintrc.yml
rules: {
no-restricted-globals: [
"error",
{
"name": "parseInt",
"message": "Use parseNumber"
},
{
"name": "parseFloat",
"message": "Use parseNumber"
},
]
}
さいごに
Number()がnullを入れると0になってしまうのはbooleanコンテキストが影響しています。
間違いや良い方法などありましたら、コメントなどで教えていただけると幸いです。