[JavaScript講座] 文字列・数値・数学

2025年11月22日

当ページのリンクには広告が含まれています。

文字列（string）の基本

文字列リテラル

JavaScript の文字列は UTF-16 ベースで、シングル / ダブル / バッククォートで書けます。

const a = "hello";   // ダブルクォート
const b = 'world';   // シングルクォート
const c = "こんにちは"; // 日本語もOK

どれを使うかはプロジェクトのコーディング規約次第ですが、
最近は Prettier などが自動整形してくれるので、あまり悩まなくてOKです。

テンプレートリテラル（バッククォート “）

const name = "Taro";
const age = 20;

const msg = `こんにちは、${name}さん。年齢は${age}歳ですね。`;
console.log(msg);
// こんにちは、Taroさん。年齢は20歳ですね。

変数埋め込み：${ ... }
改行をそのまま書ける：

const multi = `1行目
2行目
3行目`;

テンプレートリテラルは、ほぼ「デフォルト選択肢」にして良いレベルで便利です。

文字列は「イミュータブル」

変更できない

let s = "hello";
s[0] = "H";
console.log(s); // "hello" のまま

s[0] に代入してもエラーにはならないが、実際には変わらない（環境次第で無視される）
文字列を「変更」したい場合は、新しい文字列を作るしかない

s = "H" + s.slice(1); // "Hello"

文字列の長さとインデックスアクセス

`length`

const s = "hello";
console.log(s.length); // 5

サロゲートペア（絵文字など）では「見た目の文字数」と length がズレることがありますが、
まずは「UTF-16 のコードユニット数」という程度でOK。

インデックスアクセス

const s = "hello";

console.log(s[0]);      // "h"
console.log(s.charAt(1)); // "e"
console.log(s[100]);    // undefined

s[index] は ES5 以降で一般的
古いコードでは charAt がよく出てきます（挙動は似ている）

部分文字列の取得：slice / substring

`slice(start, end?)`

const s = "JavaScript";

console.log(s.slice(0, 4));  // "Java"   (0〜3)
console.log(s.slice(4));     // "Script" (4〜最後まで)
console.log(s.slice(-6));    // "Script" (後ろから 6 文字)
console.log(s.slice(1, -1)); // "avaScrip"

特長：

end は含まれない
負のインデックスをサポート（後ろから数えられる）

`substring(start, end?)`

const s = "JavaScript";

console.log(s.substring(0, 4)); // "Java"
console.log(s.substring(4, 0)); // "Java" （順番が入れ替わってもOK）

負の値は 0 として扱われる
slice に比べて直感的でない場面が多いので、基本は slice を使う方針でOKです。

文字列検索：indexOf / includes / startsWith / endsWith

`indexOf` / `lastIndexOf`

const s = "bananas";

console.log(s.indexOf("na"));      // 2
console.log(s.indexOf("na", 3));   // 4 (検索開始位置を指定)
console.log(s.indexOf("xyz"));     // -1 (見つからない)

console.log(s.lastIndexOf("na"));  // 4（後ろから探索）

見つからない場合は -1 → 条件判定でよく使う

if (s.indexOf("na") !== -1) { ... }

`includes`（最近はこちらが主流）

const s = "bananas";

console.log(s.includes("na"));    // true
console.log(s.includes("xyz"));   // false
console.log(s.includes("na", 3)); // true（index 3 以降を検索）

indexOf(...) !== -1 のラッパー的存在
可読性が高いので、「含まれているか？」は基本 includes

`startsWith` / `endsWith`

const url = "https://example.com";

console.log(url.startsWith("https://")); // true
console.log(url.endsWith(".com"));       // true

prefix / suffix チェックに便利

トリミングとパディング：trim / padStart / padEnd

`trim` / `trimStart` / `trimEnd`

const s = "  hello \n";

console.log(s.trim());      // "hello"
console.log(s.trimStart()); // "hello \n"
console.log(s.trimEnd());   // "  hello"

空白文字（スペース・タブ・改行など）を削る

`padStart` / `padEnd`

const s = "42";

console.log(s.padStart(5, "0")); // "00042"
console.log(s.padEnd(5, "."));   // "42..."

第1引数：最終的な文字列の長さ
第2引数：埋める文字列（省略すると " "）

ゼロ埋めの整形でよく使います。

置換：replace / replaceAll

`replace`

const s = "apple banana apple";

console.log(s.replace("apple", "orange"));
// "orange banana apple"（最初の1箇所だけ）

console.log(s.replace(/apple/g, "orange"));
// "orange banana orange"（正規表現＋gフラグで全て）

第1引数に文字列を渡した場合 → 最初の1個だけ置換
全部置換したい → 正規表現 .../g を使う or replaceAll を使う

`replaceAll`（ES2021）

const s = "apple banana apple";
console.log(s.replaceAll("apple", "orange"));
// "orange banana orange"

シンプルな「全置換」がしたいだけなら replaceAll が分かりやすい

分割：split と join（配列とセット）

const s = "a,b,c";
const arr = s.split(","); // ["a", "b", "c"]

console.log(arr.join("-")); // "a-b-c"

split は「文字列 → 配列」
join は配列側のメソッドですが、「配列 → 文字列」でよく一緒に使う

数値（number）の基本

JavaScript の数値型は「64bit 浮動小数点数」

const x = 1;
const y = 3.14;
const z = -0.5;

JavaScript の number は全て IEEE 754 の倍精度浮動小数点数
「整数型」と「浮動小数型」は分かれていない（int も float も無い）

そのため、2進数の都合による誤差が出ます：

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

この種の誤差は JavaScript 特有ではなく、
多くの言語（C, Java, Pythonなど）の浮動小数でも共通です。

数値リテラル

const dec = 255;      // 10進
const hex = 0xff;     // 16進
const bin = 0b11111111; // 2進
const oct = 0o377;    // 8進

const big = 1_000_000; // 数値リテラルの区切り（_ は無視される）

特殊な値：`NaN` / `Infinity` / `-Infinity`

console.log(1 / 0);      // Infinity
console.log(-1 / 0);     // -Infinity
console.log(0 / 0);      // NaN

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

NaN（Not-a-Number）は「数値型ではあるが、どの数とも等しくない特別な値」
NaN === NaN は false になるのがポイント

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

NaN 判定には後述の Number.isNaN を使います。

数値変換：Number / parseInt / parseFloat など

`Number()` と単項 `+`（数値への「厳しめ」変換）

console.log(Number("42"));   // 42
console.log(Number("3.14")); // 3.14
console.log(Number("  10 ")); // 10
console.log(Number("10px")); // NaN
console.log(Number(true));   // 1
console.log(Number(false));  // 0

console.log(+"42");          // 42（単項+でも同じ）

文字列全体が数値として解釈できないと NaN になる（"10px" など）

`parseInt` / `parseFloat`（先頭から読めるところまで）

console.log(parseInt("10px", 10));  // 10
console.log(parseFloat("3.14m"));   // 3.14
console.log(parseInt("0xff", 16));  // 255
console.log(parseInt("0xff"));      // 255（先頭から10か16か自動判定）

「先頭から数えられるところまで読む」タイプなので "10px" → 10 になる
第2引数（基数）はなるべく明示した方が安全（特に16進など）

`Number.isNaN` / `Number.isFinite`（有限数かどうか）

console.log(Number.isNaN(NaN));         // true
console.log(Number.isNaN("NaN"));       // false
console.log(isNaN("NaN"));              // true（古い isNaN は緩い）

console.log(Number.isFinite(10));       // true
console.log(Number.isFinite(Infinity)); // false
console.log(Number.isFinite("10"));     // false

Number.isNaN / Number.isFinite は型変換をしない（厳密）
古い isNaN / isFinite は中で一旦 Number(...) してから判定するため挙動が直感的でないことがある

数値のフォーマット：toFixed / toString(radix)

`toFixed`

const n = 3.14159;

console.log(n.toFixed(2)); // "3.14"
console.log(n.toFixed(0)); // "3"

戻り値は文字列です（ここ重要）
表示用のフォーマットに便利（小数点以下の桁数を指定）

`toString(radix)`（基数変換）

const n = 255;

console.log(n.toString(10)); // "255"
console.log(n.toString(16)); // "ff"
console.log(n.toString(2));  // "11111111"

Math オブジェクト（数学ユーティリティ）

基本プロパティ

console.log(Math.PI);   // 3.141592653589793
console.log(Math.E);    // 2.718281828459045

丸め系：`round` / `floor` / `ceil` / `trunc`

console.log(Math.round(1.4)); // 1  (四捨五入)
console.log(Math.round(1.5)); // 2

console.log(Math.floor(1.9)); // 1  (小数切り捨て)
console.log(Math.ceil(1.1));  // 2  (小数切り上げ)

// trunc は小数部分を単純に切り捨て（負数も0方向へ）
console.log(Math.trunc(1.9));  // 1
console.log(Math.trunc(-1.9)); // -1

絶対値・最大値・最小値

console.log(Math.abs(-5));             // 5
console.log(Math.max(1, 10, 3));       // 10
console.log(Math.min(1, 10, 3));       // 1
console.log(Math.max(...[1, 10, 3]));  // 10（配列の場合）

べき乗・平方根

console.log(Math.pow(2, 3)); // 8
console.log(2 ** 3);         // 8（演算子もある）

console.log(Math.sqrt(16));  // 4
console.log(Math.sqrt(2));   // 1.414...

乱数：`Math.random`

console.log(Math.random()); // 0以上1未満の乱数

// 0〜9 の整数
const r1 = Math.floor(Math.random() * 10);

// 1〜6 のサイコロ
const dice = Math.floor(Math.random() * 6) + 1;

Math.random() は (0～1) の一様乱数
基本パターンは「範囲を掛けて floor してオフセットを足す」

BigInt の概要

BigInt とは

const a = 9007199254740991;        // Number.MAX_SAFE_INTEGER
const b = 9007199254740992;        // これを超えると安全ではない

const big = 9007199254740991n;     // BigInt リテラル（末尾に n）
const big2 = BigInt("9007199254740992");

number の安全な整数範囲は ±(2^53 - 1)（Number.MAX_SAFE_INTEGER）
それを超える整数を正確に扱いたいときは BigInt 型を使う

`number` と `BigInt` は混ぜられない

const n = 10;
const big = 10n;

// console.log(n + big); // TypeError: Cannot mix BigInt and other types

BigInt と number の演算は原則禁止（エラーになる）
どちらかに寄せてから使う必要がある：

BigInt(n) + big;
// または
Number(big) + n;

BigInt は「こういう特殊な整数型もある」と知っていれば十分で、
本格的に使うのは大きな整数を扱うライブラリや暗号系・金融系などの場面です。

<<前へ（プロパティ属性とディスクリプタ）

>>次へ（配列とコレクション）

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

[JavaScript講座] 文字列・数値・数学

文字列（string）の基本

文字列リテラル

テンプレートリテラル（バッククォート “）

文字列は「イミュータブル」

変更できない

文字列の長さとインデックスアクセス

length

インデックスアクセス

部分文字列の取得：slice / substring

slice(start, end?)

substring(start, end?)

文字列検索：indexOf / includes / startsWith / endsWith

indexOf / lastIndexOf

includes（最近はこちらが主流）

startsWith / endsWith

トリミングとパディング：trim / padStart / padEnd

trim / trimStart / trimEnd

padStart / padEnd

置換：replace / replaceAll

replace

replaceAll（ES2021）