JavaScriptのMathメソッドと数値と文字列の変換や確認方法のまとめ

2021年2月17日2021年3月26日JavaScript

JavaScriptの数値確認方法をまとめました。

目次から読む

1. JavaScriptの数値で気をつけるべき挙動
2. 文字列を数値へ変換する方法
- 2.1. Number(),と+演算子
3. 単位を取り除いて整数、少数にする
- 3.1. parseInt():整数とparseFloat(): 少数
4. true/falseで数値を確認する
- 4.1. isNaN(), isFinite(): 数値かどうか確認する
- 4.2. isInteger(): 整数かどうかを確認する
5. Mathメソッド
6. 表示を整える
7. %剰余演算子
- 7.1. 偶数か奇数かを確認する方法
- 7.2. 指定した行数ごとに何か処理をしたい場合

JavaScriptの数値で気をつけるべき挙動

Base 10（10進数）というのは、0から9で数値を表します。
Banary base 2(2進数)は0か1かで数値を表します。

console.log(0.1+0.2);//0.30000000000000004とでる

そのため

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

0.1+0.2は0.3ですが、なぜかfalseが返されてしまいます。これは2進数をそれぞれに変換して加算しているためです。
10進数であれば0.account1は1/10で0.1,0.2も同様にできますが、2進数だとこのようなことが起こります。
JavaScriptではエラーになるので知っておきましょう。これは他の言語でも起こるものがあるので、このような挙動があるということを知っておきましょう。

文字列を数値へ変換する方法

Number(),と+演算子

// Conversion
//文字列の数字をNumber数値にする方法
console.log(Number('23')); //Numberの23
console.log(+'23');//Numberの23 //+があると自動的にnumberになる

// Parsing
console.log(Number.parseInt('30px', 10));//30
console.log(Number.parseInt('a30px', 10));//NaN //最初が数字で始まる必要がある

第2引数にradixを設定できます。radixはシンプルにいうと10とかくと10進数、16とかけば16進数、2とかけば2進数で換算されます。そのため、通常の場合においては10進数の10を記入シておく場合が多いでしょう。
30pxをparseInt()メソッドにかけると30になることから、このような単位を取り除きたいときに使うのも便利な方法です。

その他にも方法があり、こちらのサイトがとてもわかりやすく説明されています。

【JavaScript】数値→文字列、文字列→数値の変換

単位を取り除いて整数、少数にする

parseInt():整数とparseFloat(): 少数

//整数: parseInt
//少数: parseFloat
console.log(Number.parseInt('2.8rem')); //2
console.log(Number.parseFloat('2.8rem'));//2.8
NumberをつけなくてもOKだけど、ちょっと古いやり方
console.log(parseFloat('2.5rem'));//2.5

CSSから情報を取得するときに、多用するのは、単位を取り除き、かつ小数点以下も返してくれるparseFloatがいいでしょう。

true/falseで数値を確認する

isNaN(), isFinite(): 数値かどうか確認する

// isNaN
//NaNならtrue/NaNじゃないならfalse
console.log(Number.isNaN(20));//false　数値であってNaNではないのでfalse
console.log(Number.isNaN('20'));//false, 文字列であってNaNではないのでfalse
console.log(Number.isNaN(+'20X'));//true NaNなのでtrue
console.log(Number.isNaN(20/0));//false 0で割れないInfinityになる。これもNaNではないのでfalse
isNaNは数値でないかをtrue/falseで返すのですが、notという否定がtrueなのでややこしいです。
数値かどうかの確認はしたのisFiniteのほうがストレートでわかりやすいです。

// Finiteは有限の意味
console.log(Number.isFinite(20));//true 
console.log(Number.isFinite('20'));//false
console.log(Number.isFinite(+'20X'));//false
console.log(Number.isFinite(20/0));//false

Finiteは有限の意味なのでinfinity(無限)ループになる0で割るということもfalseで返します。
数字かどうかをチェックする際、isFiniteは数値である値が数値ならtrueと返してくれるので、isNaNよりisFiniteのほうが使いやすいです。
isFiniteは、値が数値（Number）かどうかを確認するベストな方法です。

isInteger(): 整数かどうかを確認する

//isIntegerは整数かどうかを確認する
console.log(Number.isInteger(20));//true 
console.log(Number.isInteger(20.0));//true 
console.log(Number.isInteger(20/0));//false

isIntegerは整数かどうかを確認する際に使います。

Mathメソッド

Math.sqrt()とべき乗演算子**: 平方根

console.log(Math.sqrt(25));//5

平方根は、英語で（スクエア・ルート ,square root）といいます。

console.log(25 ** (1/2));//5

べき乗演算子**でも同じことができます。

console.log(8 ** (1/3)); //2
console.log(64 ** (1/3)); // 3.9999999999999996

立方根（りっぽうこん、cubic root、root of third power）も上のようにすることで計算可能です。

Math.max: 最大値を返す

//最大値を返すMath.max

console.log(Math.max(4,16,73,44,222)); //222
console.log(Math.max(4,16,'73',44,'222')); //222 文字列でも数値にして返します。
console.log(Math.max(4,16,73,'44px',222)); //NaN 完全な文字列があるとNaNを返します。

Math.min(): 最小値を返す

console.log(Math.min(4,16,73,44,222)); //4
console.log(Math.min(4,16,'73',44,'222')); //4 文字列でも数値にして返します。
console.log(Math.min(4,16,73,'44px',222)); //NaN 完全な文字列があるとNaNを返します。

Math.PI(): 円周率を返す

console.log(Math.PI);//3.141592653589793
console.log(Math.PI * parseFloat('20px') ** 2);//1256.637...
console.log(Math.PI * parseFloat('40px'));//125.663...円周=直径×円周率

円の面積=半径×半径×円周率
円周=直径×円周率
上のように円周率を使うことで、20pxの円の面積や円周を求めることもできます。

Math.random(): ランダムな数値を返す

//Math.random(): ランダムな数値を返す
console.log(Math.floor(Math.random() * 6)); //0 ~ 5のランダムな数字を返す
console.log(Math.floor(Math.random() * 6)+1); //0 ~ 6のランダムな数字を返す

指定した最小値と最大値内でランダムな数値を返す関数

//指定した最小値と最大値を返す関数
const randomInt = (min, max) => Math.floor(Math.random() * (max-min) + 1) + min;
console.log(randomInt(10,30)); //10~30の間で数字をかえします。

Math.floor(Math.random() * (max) + 1)の部分は基本的に上の0〜6を返す場合と同じです。
最小値の分だけずらしたいので + minにします。
そうすると、maxが+minした分だけずれるので、(max-min)にすると上の式になります。

Math.round(): 四捨五入

//Math.round()　四捨五入
console.log(Math.round(25.4));//25
console.log(Math.round(25.6));//26

Math.ceil(): 小数点以下を切り上げる

//Math.ceil()　小数点以下を切り上げる
console.log(Math.ceil(25.4));//26
console.log(Math.ceil(25.6));//26

Math.floor(): 小数点以下を切り下げる

//Math.floor()　小数点以下を切り下げる
console.log(Math.floor(25.4));//25
console.log(Math.floor(25.6));//25
console.log(Math.floor('25.6'));//25

Math.trunc(): シンプルに小数点を取り除く

//Math.trunc()　シンプルに小数点を取り除く
console.log(Math.trunc(25.3));//25

truncはTruncate（切り捨てる）の略ですが、シンプルに小数点以下を削除します。
どのメソッドも Type coercion (型強制)がありますので、’25.5’と文字列を入れても数値へ変換されます。

ネガティブな値のときのMath.trunc()とMath.floor()の挙動の差

console.log(Math.trunc(25.4));//25
console.log(Math.floor(25.6));//25
console.log(Math.trunc(-25.4));//25
console.log(Math.floor(-25.6));//26

ネガティブな値のときのMath.trunc()とMath.floor()の挙動には差があります。
ポジティブな値のときはどちらも同じですが、ネガティブな値はfloorは切り下げる（つまりより下の値になる)ので-25.6なら-26が返されます。
ポジティブな値のときもネガティブな値のときもシンプルに小数点以下を無視してほしいときはMath.trunc()、通常時にはMath.floor()を使うといいでしょう。

表示を整える

toFixed(): 小数点以下の桁を調整して文字列で返す

//Rounding decimals
console.log((5.7).toFixed(0));//6(String)
console.log((5.7).toFixed(3));//5.700(String)
console.log((5.7458).toFixed(2));//5.75(String)

toFixed() 小数点以下を()内に数字をいれることで調整できます。
注意点としては、toFixedは数値ではなく、文字列で返します。

Math.floor()などで数値を調整した後に、小数点以下の桁を揃えて表示を整える際に、toFixed()は便利です。

toFixed()で値を数値で返したい場合

console.log(+(5.7458).toFixed(2));//5.75(Number)

toFixed()で文字列ではなく数値で返してほしい場合は、 Numberか+を先頭につける、などをする必要があります。

Intl.NumberFormat().format()を使う

{
  const num = 123456789.12;

  const options1 = {
    style: 'currency',
    currency: 'JPY'
  };
  const options2 = {
    style: 'currency',
    currency: 'USD',
    useGrouping: false
  };
  const options3 = {
    style: 'unit',
    unit: 'celsius'
  };

  console.log('JP: ', new Intl.NumberFormat('ja-JP').format(num));
  //JP:  123,456,789.12

  console.log('US: ', new Intl.NumberFormat('en-US').format(num));
  //US:  123,456,789.12

  console.log('GE: ', new Intl.NumberFormat('de-DE').format(num));
  //GE:  123.456.789,12

// With options  
  console.log('US+options2: ', new Intl.NumberFormat('en-US', options2).format(num));
  //US+options2:  $123456789.12
  
  console.log('JP+options3: ', new Intl.NumberFormat('ja-JP', options3).format(num));
  //JP+options3:  123,456,789.12°C

}

Intl.NumberFormat()の第一引数には、’en-US’などの国を指定するとそのフォーマットの表記になります。
また、通貨は自動では変わらないため、optionsなどとして手動で設定する必要があります。
通貨以外にもいろいろ使えるので、MDNなどで確認してみてください。
useGrouping: falseとすると、数値のコンマやピリオドでの区切りがなくなります。

Intl.NumberFormat()の再利用可能な関数

{

//オブジェクト
  const acc = {
    owner: 'JD',
    num: [790, -3210, 30],
    currency: 'USD',
    locale: 'en-US',
  };


  //formatCurは再利用可能な関数
const formatCur = function(value, locale, currency) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
  }).format(value);
}

console.log(formatCur(acc.num[0], acc.locale, acc.currency));
//$790.00

}

Intl.NumberFormat()の再利用可能な関数です。

%剰余演算子

//Remiainder Operator %
console.log(7 % 2); //1  ...7-2*3 = 1

このように、余りだけを返すことができます。

偶数か奇数かを確認する方法

const isEven = n => n % 2 === 0;
console.log(isEven(4)); // true 偶数
console.log(isEven(9)); // false 奇数

const isOdd = n => n % 2 === 1;
console.log(isOdd(4)); // false 偶数
console.log(isOdd(9)); // true 奇数

n % 2 === 0がtrueなら偶数ということになるので、if文で確認すればOKです。

指定した行数ごとに何か処理をしたい場合

btn.addEventListener('click', function () {
  [...document.querySelectorAll('.backgroundColorChange')].forEach(function (row, i) {
    if (i % 2 === 0) row.style.backgroundColor = 'red';
    if(i % 3 === 0) row.style.backgroundColor = 'skyblue';
  });
});

上のようにすると、btnがクリックされたら、背景を2行目ごとにred、3行目ごとにskyblueにします。
このように、指定した行数ごとに何か処理をしたい場合は、%剰余演算子を使うととても便利です。

JavaScript

Posted by devsakaso