読み込み中...

JavaScriptで数値変換を極める9ステップ!基本から応用まで完全解説

JavaScriptで数値変換を行う サンプルコードの例 JS
この記事は約9分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを使って数値変換を行いたいけど、どのようにすればいいのか分からないという方も多いでしょう。

この記事では、JavaScriptで数値変換を行う方法を9つのステップで極めることができるようになります。

数値変換は、プログラミングにおいて非常に重要な技術の一つです。

正確に数値を扱うことで、計算や比較、データ処理など、多くの場面で役立ちます。

●JavaScriptで数値変換を行う方法

数値変換は、JavaScriptプログラミングにおいて頻繁に使用される操作です。

文字列から数値へ、または異なる数値型同士の変換など、様々なケースで必要となります。

本記事では、JavaScriptで数値変換を行うための主要な方法について詳しく説明します。

●基本的な数値変換

JavaScriptには、数値変換を行うための基本的な関数がいくつか用意されています。

この関数を使いこなすことで、多くの場面で効率的に数値変換を行うことができます。

○parseInt()関数

parseInt()関数は、文字列を整数に変換する際に使用します。

この関数は、文字列の先頭から数値として解釈できる部分を抽出し、整数値として返します。

例えば、次のようなコードを使用します。

let result = parseInt("42");
console.log(result); // 出力: 42

let anotherResult = parseInt("3.14");
console.log(anotherResult); // 出力: 3

上記の例では、”42″という文字列が整数の42に変換されています。

また、”3.14″という文字列からは整数部分の3が抽出されています。

○parseFloat()関数

parseFloat()関数は、文字列を浮動小数点数に変換する際に使用します。

この関数は、整数部分と小数部分を含む数値を正確に処理することができます。

let result = parseFloat("3.14");
console.log(result); // 出力: 3.14

let anotherResult = parseFloat("42.0");
console.log(anotherResult); // 出力: 42

この例では、”3.14″が浮動小数点数の3.14に、”42.0″が42.0に変換されています。

●文字列を数値に変換する

文字列を数値に変換する方法は、parseInt()parseFloat()以外にもあります。

より柔軟な変換が必要な場合、Number()関数を使用することができます。

○Number()関数

Number()関数は、与えられた値を数値に変換しようと試みます。

文字列だけでなく、ブール値や日付オブジェクトなども数値に変換することができます。

let stringNumber = Number("42");
console.log(stringNumber); // 出力: 42

let booleanNumber = Number(true);
console.log(booleanNumber); // 出力: 1

let dateNumber = Number(new Date());
console.log(dateNumber); // 出力: 現在のタイムスタンプ(ミリ秒)

この例では、文字列”42″が数値42に、ブール値trueが数値1に、そして日付オブジェクトが現在のタイムスタンプ(ミリ秒)に変換されています。

●浮動小数点数を整数に変換する

プログラミングにおいて、小数点以下の値を切り捨てたり、四捨五入したりする必要がある場合があります。

JavaScriptには、そのための便利な関数がいくつか用意されています。

○Math.floor()関数

Math.floor()関数は、与えられた数値の小数点以下を切り捨てて、最も近い整数を返します。

常に下方向(小さい方)に丸めるため、負の数の場合は注意が必要です。

let result = Math.floor(3.7);
console.log(result); // 出力: 3

let negativeResult = Math.floor(-3.7);
console.log(negativeResult); // 出力: -4

この例では、3.7が3に、-3.7が-4に変換されています。

○Math.round()関数

Math.round()関数は、与えられた数値を最も近い整数に四捨五入します。

0.5以上の小数は切り上げ、0.5未満の小数は切り捨てます。

let result1 = Math.round(3.4);
console.log(result1); // 出力: 3

let result2 = Math.round(3.5);
console.log(result2); // 出力: 4

let negativeResult = Math.round(-3.5);
console.log(negativeResult); // 出力: -3

この例では、3.4が3に、3.5が4に、-3.5が-3に変換されています。

●ビット演算を使った変換

JavaScriptでは、ビット演算を使って効率的に数値変換を行うこともできます。

特に、浮動小数点数を整数に変換する際に便利です。

○ビット論理和(OR)演算子

ビット論理和(OR)演算子(|)を0と組み合わせることで、浮動小数点数を整数に効率的に変換できます。

この方法は、Math.floor()関数と同様の結果を得られますが、より高速に動作します。

let floatNum = 3.7;
let intNum = floatNum | 0;
console.log(intNum); // 出力: 3

let negativeFloat = -3.7;
let negativeInt = negativeFloat | 0;
console.log(negativeInt); // 出力: -3

この例では、3.7が3に、-3.7が-3に変換されています。

ただし、この方法は32ビット整数の範囲内でのみ正確に動作することに注意してください。

●エラー処理と注意点

数値変換を行う際には、エラー処理が重要です。

無効な入力や予期せぬ結果に対処するためのコードを書くことで、プログラムの堅牢性が向上します。

○NaNの処理

数値に変換できない文字列を変換しようとすると、NaN(Not a Number)が返されます。

NaNは特殊な値で、他の値との比較が常に偽となるため、直接比較することはできません。

代わりに、isNaN()関数を使用して判定します。

let invalidNumber = Number("Hello");
console.log(invalidNumber); // 出力: NaN

if (isNaN(invalidNumber)) {
    console.log("有効な数値ではありません");
} else {
    console.log("有効な数値です");
}

この例では、”Hello”という文字列を数値に変換しようとしていますが、結果はNaNになります。

isNaN()関数を使用して、この結果が有効な数値かどうかを判定しています。

○基数の指定

parseInt()関数を使用する際は、基数(radix)を指定することが推奨されます。

基数を指定しないと、文字列の先頭が”0x”の場合は16進数、”0″の場合は8進数として解釈される可能性があります。

let octalString = "010";
let withoutRadix = parseInt(octalString);
let withRadix = parseInt(octalString, 10);

console.log(withoutRadix); // 出力: 8 (8進数として解釈)
console.log(withRadix);    // 出力: 10 (10進数として解釈)

この例では、基数を指定しない場合と、基数を10(10進数)と指定した場合の結果の違いを示しています。

●応用例

JavaScriptでの数値変換の知識を応用することで、様々な実践的な問題を解決することができます。

ここでは、よく使いそうな応用例を解説していきます。

○ユーザー入力の検証

ウェブフォームなどでユーザーから入力された値が有効な数値かどうかを確認する際に、数値変換の技術を活用できます。

function validateNumericInput(input) {
    let number = Number(input);
    if (isNaN(number)) {
        return "入力された値は数値ではありません。";
    } else if (!Number.isInteger(number)) {
        return "整数を入力してください。";
    } else if (number < 0 || number > 100) {
        return "0から100の間の数値を入力してください。";
    }
    return "有効な入力です。";
}

console.log(validateNumericInput("42"));    // 出力: 有効な入力です。
console.log(validateNumericInput("3.14"));  // 出力: 整数を入力してください。
console.log(validateNumericInput("Hello")); // 出力: 入力された値は数値ではありません。
console.log(validateNumericInput("150"));   // 出力: 0から100の間の数値を入力してください。

この例では、ユーザーの入力が数値かどうか、整数かどうか、そして特定の範囲内かどうかを確認しています。

○データの加工・整形

数値データを特定のフォーマットに変換する際にも、数値変換の技術が役立ちます。

function formatCurrency(amount) {
    let number = Number(amount);
    if (isNaN(number)) {
        return "無効な金額です。";
    }
    return number.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
}

console.log(formatCurrency("1234.5")); // 出力: 1,234.50
console.log(formatCurrency("1000"));   // 出力: 1,000.00
console.log(formatCurrency("abc"));    // 出力: 無効な金額です。

この例では、数値を通貨形式(小数点以下2桁、3桁ごとにカンマ区切り)に変換しています。

まとめ

この記事では、JavaScriptで数値変換を行う方法を9つのステップで解説してきました。

最後に、プログラミングにおいて重要なのは、常に学び続ける姿勢です。

新しい方法や最適化の技術が日々生まれています。

JavaScriptの進化に合わせて、自身のスキルも磨き続けることが大切です。