数値と数学

docs.scrimba.com

ショッピングカートが価格を合計し、ゲームがスコアを追跡し、フォームが請求する税額を計算します。すべては数値とそれらによる算術に帰結します。JavaScriptは数値を核となる構成要素の1つとして扱い、この章はそれらで何ができるかについてです。日常の数学、丸めとランダム性のための組み込みヘルパー、そしてほぼすべての人がつまずく部分、ページに入力されたテキストを足し合わせることができる数値に変換することについてです。

数値と算術

JavaScriptには1つの**数値**型があり、すべてをカバーしています。42のような整数と9.99のような小数は同じ種類の値なので、間で選ぶ必要はありません。

const price = 9.99;
const quantity = 3;
const total = price * quantity;
console.log(total); // 29.97

数学は既に知っている記号を使います。+は足し算、-は引き算、*は掛け算、/は割り算です。もう1つはあまり見かけないかもしれません。%は余りです。割り算した後に何が残っているかを示します。

const remainder = 7 % 2;
console.log(remainder); // 1

7を2で割ると3余り1なので、7 % 2は1です。これは数値が偶数かどうかを確認する方法です。偶数を2で割ると何も余りません。そのため、number % 2は偶数の場合は0、奇数の場合は1です。

JavaScriptには整数と小数の両方に対する単一の**数値**型があるため、42と9.99は同じ種類の値です。整数と小数を別の型に分割する言語とは異なり、ここではどちらを意味するか宣言する必要はありません。

5つの算術演算子は+、-、*、/、%です。余り演算子%は割り算の後に残ったものを返し、初心者が期待するよりも多くの場面で活躍します。

const total = 17;
const perRow = 5;
const leftOver = total % perRow;
console.log(leftOver); // 2

17個のアイテムを1行に5個配置すると、最後の行に2個が残り、17 % 5がそれを教えてくれます。古典的な用途は奇偶テストです。count % 2は偶数では0、奇数では1です。これは行の色を交互にしたり、リストを半分に分割したりするときに使用します。

演算子は通常の数学の優先順位に従うため、*、/、%は+と-よりも強く結合し、同じ優先度の演算子は左から右に読みます。順序が重要な場合は括弧を使いましょう。

const withTax = (100 + 20) * 1.1;
console.log(withTax); // 132

JavaScriptには1つの**数値**型があり、64ビットの浮動小数点値です（IEEE 754ダブル、ほとんどの言語がdoubleと呼ぶのと同じ表現）。このレベルでは個別の整数型はありません。つまり、42、9.99、-3はすべて同じ種類のもので、記述するすべての整数は実際には小数部がない浮動小数点数です。

5つの演算子は+ - * / %です。余り%はピン留めする価値があります。モジュロではなく余りだからです。左側のオペランドの符号を取るため、-7 % 3は1ではなく-2です。日常的なケースでは値は安定しており便利です。n % 2 === 0で偶数テストするのは標準的なトリックで、-4 % 2がまだ0なので負の数でも成立します。

const total = 128;
const pageSize = 25;
const onLastPage = total % pageSize;
console.log(onLastPage); // 3

優先度は標準的な数学に従います。*、/、%は+と-の上のティアを共有し、ティア内での評価は左から右に進みます（左結合）。文法全体は比較とロジックが入ると層がより多くなります。これは演算子の対象です。算術だけのために必要なルールはシンプルです。乗算的を加法的の前に、読み手が一呼吸置く必要がある何かを括弧で囲みます。明確さは3文字を節約するよりも優れています。

const average = (a + b + c) / 3;

Juno数値と算術 JavaScriptには1つのnumber型があるため、整数と小数は同じものであり、それらの間で選ぶ必要はありません。演算子は+ - * /と%（余り）です。便利なトリックは% 2です。偶数では0、奇数では1です。

Juno数値と算術 1つの数値型は整数と小数の両方をカバーするため、intとfloatの決定を下す必要はありません。5つの演算子は+ - * /と%です。%は覚える価値があります。count % 2は奇偶性を示し、部分的に満たされた行に何が残っているかも示します。優先度は通常の数学なので、読み手が考える必要がある何かを括弧で囲みます。

Juno数値と算術 すべての数値は64ビット浮動小数点数なので、個別の整数型はなく、42は小数部のないダブルです。%での1つの落とし穴は、モジュロではなく余りだということです。左側の符号を取るため、-7 % 3は-2です。奇偶テストでは、n % 2 === 0が負の数でも成立するため、決して噛みつきません。

Mathオブジェクト

基本的な演算子以上のものが必要な場合、JavaScriptは**Math**という組み込みの数学ヘルパーのコレクションを提供します。ドットで名前を付けて呼び出します。

console.log(Math.round(4.6)); // 5
console.log(Math.floor(4.6)); // 4
console.log(Math.ceil(4.1)); // 5

Math.roundは最も近い整数に丸め、Math.floorは常に切り下げ、Math.ceilは常に切り上げます。また、Math.maxとMath.minがあり、与えられた数値の中で最大または最小を選びます。

console.log(Math.max(3, 8, 5)); // 8
console.log(Math.min(3, 8, 5)); // 3

そしてMath.randomがあり、0から1まで（1は含まない）のランダムな小数を与えます。それ自体ではほぼ必要なものではないため、一般的なレシピはそれを掛けて床を取って、ランダムな整数を得ることです。

const roll = Math.floor(Math.random() * 6) + 1;
console.log(roll); // 4 (毎回異なる数値)

Math.random() * 6は0から6までのどこかに着地し、Math.floorはそれを0から5の整数に落とし、+ 1それをサイコロの目1から6にシフトします。

**Math**は数学関数と定数を保持する組み込みオブジェクトです。それを作成しません。常にそこにあり、ドットで方法を呼び出します。

丸めの3つ組は最もよく使う部分です。

console.log(Math.round(4.5)); // 5、最も近い整数
console.log(Math.floor(4.9)); // 4、常に切り下げ
console.log(Math.ceil(4.1)); // 5、常に切り上げ

Math.maxとMath.minは引数の最大値と最小値を返し、値を範囲内にクランプするのに便利です。

const clamped = Math.min(Math.max(userValue, 0), 100);
console.log(clamped); // 0から100の間に留まります

Math.randomは範囲[0, 1)の浮動小数点を返します。これは0が可能だが1は決して不可能であることを意味します。それを0からnまでのランダムな整数に変えるには、パターンはMath.floor(Math.random() * n)です。

const index = Math.floor(Math.random() * 5);
console.log(index); // 0から4の整数

掛け算は範囲を[0, n)に広げ、床で小数点を削除して整数に着地します。0で始まらない範囲が必要な場合（サイコロの目の場合は+ 1など）はオフセットを追加します。

**Math**は静的な名前空間オブジェクトです。数学メソッドと定数の単なるコンテナで、インスタンス化するものではありません。すべてのメソッドはMath.something()として呼び出され、ランタイムには正確に1つのMathがあります。

丸めメソッドはそれぞれ異なるターゲットに向かって丸めます。Math.roundは最も近い値へ（同点は上に行くため、Math.round(2.5)は3ですがMath.round(-2.5)は-2）、Math.floorは負の無限大へ、Math.ceilは正の無限大へ。そのfloor-is-not-truncation区別は負の数に重要です。Math.floor(-1.2)は-1ではなく-2です。

console.log(Math.floor(-1.2)); // -2、floorは負でも下に行く

Math.maxとMath.minは任意の数の引数を取り、クランプする清潔な方法です。

const clamped = Math.min(Math.max(value, min), max);

Math.randomは[0, 1)に均一に分布した浮動小数点を返します。ランダム整数のイディオムはMath.floor(Math.random() * range) + startです。範囲幅でスケール、整数にフロア、開始でシフト。2つの注意を運ぶ価値があります。暗号的に安全ではないため、トークンやユーザーが推測できないもの（crypto.getRandomValuesがそのために存在します）には使用しないでください。そしてオフ・バイ・ワンバグは包含と排他の範囲を混同することから来るため、最上位の値に到達可能かどうかを事前に決定してください。

const dice = Math.floor(Math.random() * 6) + 1;
console.log(dice); // 1から6（包括）

JunoMathオブジェクトMathは既製の数学ヘルパーのツールボックスで、ドットで呼び出します。Math.round、Math.floor（切り下げ）、Math.ceil（切り上げ）、そしてMath.max / Math.minで最大と最小を取得します。Math.randomは0から1の小数を与え、覚える価値のあるレシピはMath.floor(Math.random() * n)でランダムな整数を取得することです。パターンを信じるのに数回かかったので、それをコピーしてゆっくり読んでください。

JunoMathオブジェクトMathは常にそこにあり、セットアップは不要で、ドットで方法を呼び出します。丸めの3つ組をまっすぐに保ちます。roundは最も近い値へ、floorは下へ、ceilは上へ。minとmaxを一緒に使用して値を範囲内にクランプします。ランダムさのためには、Math.floor(Math.random() * n)は0からnまでの整数を与え、オフセットが範囲を移動させます。

JunoMathオブジェクトMathは静的な名前空間なので、1つの存在があり、構築するものはありません。負の丸めターゲットに注意してください。Math.floor(-1.2)はtruncateではなく-2で、Math.roundは同点を上に破ります。Math.floor(Math.random() * range) + startは整数のイディオムですが、Math.randomは安全ではないため、ユーザーが推測すべきではないものにcrypto.getRandomValuesを使用します。

文字列を数値に変換する

ページに入力されたすべてのものは**テキスト**として到着します。数値に見えても同じです。ボックスに5と入力すると、数値5ではなく文字列"5"が得られます。これは重要です。なぜなら、2つの文字列に対する+は追加ではなく結合するからです。

const a = "5";
const b = "3";
console.log(a + b); // "53"、8ではない

数学を行うには、テキストを最初に数値に変換します。最も明確な方法はNumber()です。

const count = Number("5");
console.log(count + 3); // 8

他に2つ見かけます。parseIntは整数を読み、小数部を削除します。parseFloatは小数部を保持します。

console.log(parseInt("42px")); // 42
console.log(parseFloat("9.99")); // 9.99

これらの両方は"42px"のようなテキストの開始時に座っている数値を読むことができ、Numberはできません。ショートカットもあります。文字列の前の+で、Numberと同じように変換されます。

console.log(+"7"); // 7

ページからの入力は常に**文字列**です。フォームフィールド、URL、データ属性。すべてテキストで、"5"のような場合でも同じです。+は文字列を連結するため、2つのテキスト値を追加すると、合計するのではなく結合します。これが初心者向けの最も一般的な数値バグです。

const price = "10";
const shipping = "5";
console.log(price + shipping); // "105"、文字列連結

計算する前に変換してください。Number()は厳密で読みやすい選択です。クリーンな数値文字列を数値に変え、完全に数値ではない何かにNaNを与えます。

console.log(Number("42")); // 42
console.log(Number("42px")); // NaN、完全に数値ではない

parseIntとparseFloatはより許容します。文字列の前から数値を読んで、フィットしない最初の文字で停止します。そのため、parseInt("42px")は42です。parseIntは小数部を破棄します。parseFloatはそれを保持します。

console.log(parseInt("42px", 10)); // 42
console.log(parseFloat("3.14 radians")); // 3.14

常に10進数を読むように、parseIntに第2引数として10を渡してください。単項+はNumberのように動作する簡潔なコンバーターです。全体の値にはNumber()を使用し、テキスト内に埋め込まれた数値にはparseInt/parseFloatを使用してください。

外の世界からのテキストは常に**文字列**であり、+は連結のためにオーバーロードされているため、"10" + "5"は"105"です。+を除くすべての算術演算子はオペランドを数値に強制するため、"10" * 1は10ですが、それに頼るのは読みやすさの罠です。意図的に変換します。

Number()は全文字列強制です。トリム済みの文字列全体が有効な数値リテラルである場合にのみ成功し、そうでなければNaNです。16進数（Number("0x1f")は31）、指数、先頭または末尾の空白を理解し、""を0として扱います。これは知る価値のある鋭いエッジです。

console.log(Number("")); // 0、見落とすには鋭い
console.log(Number("  12 ")); // 12、空白をトリム
console.log(Number("12abc")); // NaN

parseIntとparseFloatはプレフィックスをパースします。彼らは遠くまで読んで、残りを無視します。そのため、parseInt("12abc")は12です。常にparseIntに基数を与えてください（parseInt(str, 10)）。なしで、"0x10"のような入力は16進数として読まれます。単項+はNumber強制の最短形式で、簡潔なコードに頻繁に現れます（+"3.5"は3.5）。同じルールと同じ""が0になる驚きです。

実用的なルール。全体の値が数値である必要があり、それ以外はキャッチしたいエラーである場合はNumber（または+）、数値がテキストに埋め込まれていて期待する場合はparseInt/parseFloat。どちらを選んでも、結果はNaNである可能性があり、次のセクションはそれについてです。この先の比較と強制は演算子にあり、文字列側の話は文字列にあります。

Juno文字列を数値に変換する ページに入力されたすべてはテキストなので、"5"は数値5ではなく、"5" + "3"は8ではなく"53"を与えます。最初に変換します。Number("5")が最も明確で、parseIntは整数を読み、parseFloatは小数を保持し、文字列の前の+は素速いショートカットです。結合ではなく追加のトラップを見守ります。誰もが一度はそれにかかります。

Juno文字列を数値に変換する ページ入力は常に文字列で、+が文字列を結合するため、"10" + "5"は"105"で、最も一般的な数値バグです。全体の値が数値である必要があり、"42px"のようなテキスト内に数値がある場合はparseIntまたはparseFloatを使用します。parseIntに10進数引数を与え、驚くことはありません。

Juno文字列を数値に変換する+を除くすべての演算子は数値に強制するため、"10" * 1は機能しますが、代わりに意図的に変換します。Number()は全文字列が数値であることを要求し、静かに""を0にしますが、parseIntとparseFloatはプレフィックスをパースして残りを無視するため、常にparseIntに10の基数を渡してください。それらはNaNを与える可能性があります。これは次に慣れるべきことです。

数値の鋭いエッジ

JavaScriptの数値は早期に1回見る価値がある驚きを保持しています。2つの単純な小数を追加して、奇妙な答えを得ることができます。

console.log(0.1 + 0.2); // 0.30000000000000004

これはあなたのコードのバグではありません。コンピューターは小数を、すべての値を正確に表現することができないようにストレージします。そのため、小さなエラーが忍び込みます。それはめったに問題になりませんが、そうなるときは、表示のために結果を丸めます。

const sum = 0.1 + 0.2;
console.log(Math.round(sum * 100) / 100); // 0.3

また、NaNという値に出会う可能性があります。これは「数値ではない」の略です。数学演算に理にかなった答えがないときに取得します。例えば、ナンセンステキストを数値に変えようとするときです。

console.log(Number("hello")); // NaN

出力にNaNを見ると、通常は変換がどこかで失敗しました。そのため、恐れるべき何かではなく、有用な手がかりです。

2つの数値は最終的に驚くでしょう。目的で会うのが良いです。

最初は**浮動小数点**の不正確性です。小数はバイナリで格納されるため、いくつかの値は正確に保持できません。そのため、0.1 + 0.2は正確に0.3ではありません。

console.log(0.1 + 0.2 === 0.3); // false

実用的な修正は、表示のために丸めること、または全体のユニットで作業することです。マネーは古典的なケースです。金額を整数セント（10.99ではなく1099）として保持し、表示するときのみ除算します。これはエラーを完全に回避します。

const cents = 1099;
console.log(cents / 100); // 10.99、表示に正確

2番目はNaN、「数値ではない」で、Number("hello")や0 / 0など数値の答えがない操作の結果です。その最も奇妙な特性は、それ自体に等しくないことです。

console.log(NaN === NaN); // false

そのため、===でテストすることはできません。Number.isNaN(value)を使用してください。これはNaNに対してのみtrueを返します。

console.log(Number.isNaN(Number("hello"))); // true

また、ゼロで除算する（1 / 0）か数値範囲をオーバーフロー（1 / 0）させたときに取得するInfinityもあります。比較では実数のような動作をしますが、計算がエッジを逃れたことを示します。

3つの値が数値型のエッジに座り、プロフェッショナルはすべての3つに反射記憶で必要です。

**浮動小数点**の不正確性は有名なものです。IEEE 754はバイナリで数値を格納し、0.1のような値には正確なバイナリ表現がないため、算術は丸めエラーを蓄積します。

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false

算術から来たどちらかの側が浮動小数点と===を比較しないでください。本番環境で2つの修正が成立します。表示と比較のために固定精度に丸めるか、通貨のような正確さが必要な場合は、最小の整数単位で作業し、境界でのみ変換します。整数セント（1099）としてお金を保存し、出力時にフォーマットすることで、バグのクラスを1つのインスタンスにパッチするのではなく削除します。

const totalCents = 1099 + 250;
console.log(totalCents); // 1349、正確な整数算術

NaNは数値型のエラー値で、0 / 0、Number("x")、および未定義の数値結果を持つすべての操作によって生成されます。仕様で義務付けられた一意のプロパティがあります。自分自身と等しくない唯一の値です。そのため、NaN === NaNはfalseで、それが同一性チェックが失敗する理由であり、なぜNumber.isNaN(x)が信頼できるテストとして存在するのかです。より古いグローバルisNaNよりもNumber.isNaNフォームを好みます。引数を最初に強制し、"hello"のような実際にはNaNではないものに対してtrueを報告します。

console.log(NaN === NaN); // false、NaNは決して自分自身と等しくない
console.log(Number.isNaN(0 / 0)); // true、信頼できるテスト

Infinity（と-Infinity）は1 / 0から、または表現可能な範囲を超過するから得られるものです。これは実数、比較可能な値です（Infinity > 1e308はtrue）。これは「まだ制限なし」のための便利なセンチネルを見つけるときに作成しますが、表示またはデータベースに到達する場合は驚きです。結果がオーバーフローするか0で除算する可能性がある場合、Infinityが下流に漏れるまでサニティフォールバックを決定します。

Juno数値の鋭いエッジ 小数は少しゆるく格納されるため、0.1 + 0.2は0.30000000000000004として出てきます。これは正常で、あなたのコードのバグではありません。重要な場合は、表示する前に結果を丸めます。そしてNaNは「数値ではない」を意味し、変換に失敗したときに得られる答えです。予期したようにテキストが数値に変わらなかったことをの手がかりとして扱います。

Juno数値の鋭いエッジ 浮動小数点とは0.1 + 0.2は正確に0.3ではないため、表示のために丸めるか、マネー用の整数セントのような全体のユニットで作業します。NaNは「数値の答えがない」値で、その罠はNaN === NaNがfalseであることなので、代わりにNumber.isNaNでテストします。Infinityはゼロで除算やオーバーフローから表示され、計算がエッジを逃れたことを意味します。

Juno数値の鋭いエッジ 算術浮動小数点を===と比較しないでください。精度に丸めるか、整数セントでお金を保つため、エラークラスが消えます。NaNは自分自身と等しくない唯一の値で、これは正確にNumber.isNaNが存在する理由で、"hello"のような状態になるcoercing global isNaNをもたらします。Infinityは0で除算またはオーバーフロー以下の実数、比較可能な値で、表示またはデータベースに到達する前にサニティフォールバックを与えます。

数値の次のステップ

数値はJavaScriptの少数のコアデータ型の1つで、テキストとtrue/false値と一緒に座っています。ほとんどの実際のプログラムはそれらを混ぜ、文字列から数値を引き出し、比較し、結果を変数に格納します。そしてその比較と組み合わせを行う演算子は、次の演算子の対象です。