【JavaScript】文字列を数値型に変換する方法｜Number・parseInt・parseFloat・単項+の違いとNaN・全角・空文字の罠まで解説

console.log(Number("123"));    // 123
console.log(Number("123.45")); // 123.45
console.log(Number("1e3"));    // 1000（指数表記）
console.log(Number("0x1F"));   // 31（16進数）
console.log(Number("123abc")); // NaN（全体が数値でない）

console.log(+"123");    // 123
console.log(+"123.45"); // 123.45
console.log(+"");       // 0（Number() と同じ挙動）
console.log(+"123abc"); // NaN

console.log(parseInt("123", 10));  // 123
console.log(parseInt("12px", 10)); // 12（先頭の数値部分だけ）
console.log(parseInt("3.14", 10)); // 3（整数化・切り捨てではなく解析を止める）
console.log(parseInt("abc", 10));  // NaN
console.log(parseInt("", 10));     // NaN（Number("")=0 とは異なる！）

console.log(parseFloat("123.45"));  // 123.45
console.log(parseFloat("1.5kg"));   // 1.5（単位を無視）
console.log(parseFloat("3.14.15")); // 3.14（2つ目の . で止まる）
console.log(parseFloat("abc"));     // NaN

console.log(Number(""));        // 0（空文字が0になる）
console.log(Number("   "));     // 0（空白だけも0）
console.log(Number("1,000"));   // NaN（カンマ区切りは不可）
console.log(Number("１２３"));    // NaN（全角数字は変換されない）
console.log(Number(null));      // 0
console.log(Number(undefined)); // NaN
console.log(Number(true));      // 1

// 失敗時はフォールバック値を返す堅牢な変換
function toNumber(value, fallback = 0) {
  if (typeof value !== "string" || value.trim() === "") return fallback;
  const n = Number(value);
  return Number.isNaN(n) ? fallback : n;
}

console.log(toNumber("123"));     // 123
console.log(toNumber("abc"));     // 0（フォールバック）
console.log(toNumber("", 100));   // 100（空文字はフォールバック）
console.log(toNumber("12.5", 0)); // 12.5

const raw = document.getElementById("price").value; // 例: "1980"
const price = Number(raw);

if (Number.isNaN(price)) {
  console.log("数値を入力してください");
} else {
  console.log(price * 1.1); // 税込み計算など
}