明示的な型変換の方法
Number、String、Boolean を使って意図的に型を変換します。
「明示的な型変換の方法」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
明示的な型変換
明示的な型変換とは、演算子による型強制に頼らず、関数を使って意図的に値の型を変更することです。これにより、コードがより明確で安全になります。
console.log(Number("42"))
console.log(String(42))Number関数
Number関数は値を数値へ変換します。数値を表す文字列は正しく変換され、数値でない文字列はNaNになります。
console.log(Number("3.14"))
console.log(Number(" 10 "))
console.log(Number("abc"))Numberの境界ケース
Numberは空文字列と値nullを0として扱いますが、undefinedはNaNになります。こうした境界ケースを知っておくと、バグを防げます。
console.log(Number(""))
console.log(Number(null))
console.log(Number(undefined))parseInt
parseIntは文字列の先頭から整数を読み取り、最初に数値以外の文字が現れたところで停止します。後続のテキストは無視します。
console.log(parseInt("42px"))
console.log(parseInt("3.99"))
console.log(parseInt("abc"))parseIntの基数
数値の基数を明示するため、parseIntには必ず基数を渡します。通常の10進数を解析する場合は、あいまいさを避けるため10を使います。
console.log(parseInt("0x1F", 16))
console.log(parseInt("101", 2))
console.log(parseInt("08", 10))parseFloat
parseFloatは文字列の先頭から浮動小数点数を読み取り、parseIntなら切り捨てる小数部分も保持します。
console.log(parseFloat("3.14m"))
console.log(parseFloat("1.5e3"))String関数
String関数は、nullやundefinedを含む任意の値をテキスト表現へ変換します。nullはnull、undefinedはundefinedという単語になります。
console.log(String(123))
console.log(String(true))
console.log(String(null))toStringメソッド
ほとんどの値にはtoStringメソッドがあります。数値の場合は基数を指定して、2進数や16進数のテキストを生成できます。
console.log((255).toString(16))
console.log((5).toString(2))Boolean関数
Boolean関数はtruthyとfalsyのルールに従って値を変換し、明示的にtrueまたはfalseを返します。
console.log(Boolean(1))
console.log(Boolean(""))
console.log(Boolean("no"))適切なツールを選ぶ
文字列全体を数値に変換するにはNumberを使い、混在したテキストから数値を取り出すにはparseIntまたはparseFloatを使います。テキストを出力するにはStringまたはtoStringを使います。
console.log(Number("100"))
console.log(parseInt("100 dollars", 10))変換結果を検証する
数値へ変換した後は、結果を使う前にNumber.isNaNで変換が成功したことを確認します。
const raw = "x9"
const n = Number(raw)
if (Number.isNaN(n)) {
console.log("invalid number")
}クイックチェック
型変換についての知識を確認してみましょう。
まとめ
まとめ：明確なコードにするため、型は明示的に変換します。
- Numberは文字列全体を変換し、数値でない文字列はNaNになります
- parseIntとparseFloatは先頭にある数値を取り出します
- parseIntには必ず基数を渡します
- StringとBooleanは、それぞれテキストとtruthy・falsyに基づく値へ変換します
console.log(Number("7"))
console.log(String(7))よくある質問
「明示的な型変換の方法」レッスンは無料ですか？
はい。「明示的な型変換の方法」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「明示的な型変換の方法」で何を学びますか？
Number、String、Boolean を使って意図的に型を変換します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「明示的な型変換の方法」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。