【JavaScript】文字列のバイト数を取得する方法（完全ガイド）

注意：JavaScript の string.length は UTF-16 のコードユニット数を返します。これは「文字数」でも「バイト数」でもありません。絵文字（サロゲートペア）では "?".length が 2 になります。

function getByteLength(str) {
  const encoder = new TextEncoder();
  return encoder.encode(str).length;
}

// 使用例
console.log(getByteLength('Hello'));       // 5
console.log(getByteLength('こんにちは'));  // 15
console.log(getByteLength('?'));         // 4
console.log(getByteLength('Hello世界'));   // 11

実行結果

5
15
4
11

ポイント：TextEncoder は常に UTF-8 でエンコードするため、結果が安定しています。最も推奨される方法です。

const encoder = new TextEncoder();

// ASCII: 1文字 = 1バイト
console.log(encoder.encode('A'));   // Uint8Array [65]

// 日本語: 1文字 = 3バイト
console.log(encoder.encode('あ'));  // Uint8Array [227, 129, 130]

// 絵文字: 1文字 = 4バイト
console.log(encoder.encode('?')); // Uint8Array [240, 159, 142, 137]

function getByteLengthBlob(str) {
  return new Blob([str]).size;
}

// 使用例
console.log(getByteLengthBlob('Hello'));       // 5
console.log(getByteLengthBlob('こんにちは'));  // 15
console.log(getByteLengthBlob('?'));         // 4

実行結果

5
15
4

注意：Blob はブラウザ環境の API です。Node.js でも v15.7.0 以降で使えますが、TextEncoder の方がパフォーマンスに優れます。

function getByteLengthURI(str) {
  const encoded = encodeURIComponent(str);
  let byteCount = 0;

  for (let i = 0; i < encoded.length; i++) {
    // %XX は1バイト、それ以外のASCII文字も1バイト
    if (encoded[i] === '%') {
      byteCount++;
      i += 2; // %XX の XX をスキップ
    } else {
      byteCount++;
    }
  }

  return byteCount;
}

// 使用例
console.log(getByteLengthURI('Hello'));       // 5
console.log(getByteLengthURI('こんにちは'));  // 15
console.log(getByteLengthURI('?'));         // 4

実行結果

5
15
4

// ASCII文字はそのまま（1バイト）
console.log(encodeURIComponent('A'));    // "A"          → 1バイト

// 日本語は %XX が3つ（3バイト）
console.log(encodeURIComponent('あ'));   // "%E3%81%82"  → 3バイト

// 絵文字は %XX が4つ（4バイト）
console.log(encodeURIComponent('?'));  // "%F0%9F%8E%89" → 4バイト

ポイント：より簡潔に書く方法もあります。エンコード後の文字列から %XX を1文字に置き換え、その長さを取ればバイト数になります。

function getByteLengthSimple(str) {
  return encodeURIComponent(str).replace(/%[0-9A-F]{2}/gi, 'x').length;
}

console.log(getByteLengthSimple('こんにちは')); // 15

// デフォルトは UTF-8
console.log(Buffer.byteLength('Hello'));       // 5
console.log(Buffer.byteLength('こんにちは'));  // 15
console.log(Buffer.byteLength('?'));         // 4

// エンコーディングを指定
console.log(Buffer.byteLength('Hello', 'utf8'));    // 5
console.log(Buffer.byteLength('Hello', 'utf16le')); // 10
console.log(Buffer.byteLength('Hello', 'ascii'));   // 5
console.log(Buffer.byteLength('Hello', 'base64'));  // 3 (Base64デコード後)

実行結果

5
15
4
5
10
5
3

ポイント：Buffer.byteLength() は文字列を Buffer に変換せずにバイト数だけを計算するため、メモリ効率に優れています。Node.js 環境では最も推奨される方法です。

エンコーディングの特徴

• UTF-8: Web標準。ASCII は1バイト、日本語は3バイト。可変長エンコーディング
• UTF-16: JavaScript の内部表現。基本的に2バイト固定、サロゲートペア文字は4バイト
• Shift_JIS: レガシー日本語エンコーディング。ASCII は1バイト、日本語は2バイト。絵文字非対応

const str = 'こんにちは';

console.log('UTF-8  :', Buffer.byteLength(str, 'utf8'));     // 15
console.log('UTF-16 :', Buffer.byteLength(str, 'utf16le'));  // 10
console.log('ASCII  :', Buffer.byteLength(str, 'ascii'));    // 5 (非ASCII文字は切り捨て)

実行結果

UTF-8  : 15
UTF-16 : 10
ASCII  : 5

const encoder = new TextEncoder();

const emojis = [
  { char: '?',      name: '基本絵文字' },
  { char: '??',     name: '国旗' },
  { char: '?‍?‍?‍?', name: '家族' },
  { char: '??',     name: '肌色付き' },
];

emojis.forEach(({ char, name }) => {
  const bytes = encoder.encode(char).length;
  console.log(`${name}: ${char} → ${bytes}バイト (.length=${char.length})`);
});

実行結果

基本絵文字: ? → 4バイト (.length=2)
国旗: ?? → 8バイト (.length=4)
家族: ?‍?‍?‍? → 25バイト (.length=11)
肌色付き: ?? → 8バイト (.length=4)

注意：ZWJ シーケンス（Zero Width Joiner で結合された絵文字）は、見た目1文字でも内部的には複数のコードポイントが結合されており、バイト数が非常に大きくなります。バイト数制限を設ける場合はこの点に注意してください。

class ByteValidator {
  constructor(maxBytes) {
    this.maxBytes = maxBytes;
    this.encoder = new TextEncoder();
  }

  /** バイト数を取得 */
  getByteLength(str) {
    return this.encoder.encode(str).length;
  }

  /** 制限内かチェック */
  isValid(str) {
    return this.getByteLength(str) <= this.maxBytes;
  }

  /** 残りバイト数 */
  remaining(str) {
    return this.maxBytes - this.getByteLength(str);
  }

  /** 詳細なバリデーション結果 */
  validate(str) {
    const byteLength = this.getByteLength(str);
    return {
      isValid: byteLength <= this.maxBytes,
      byteLength,
      maxBytes: this.maxBytes,
      remaining: this.maxBytes - byteLength,
      charLength: str.length,
    };
  }
}

// 使用例: MySQL VARCHAR(255) のバイト数チェック
const validator = new ByteValidator(255);

console.log(validator.validate('Hello World'));
// { isValid: true, byteLength: 11, maxBytes: 255, remaining: 244, charLength: 11 }

console.log(validator.validate('あ'.repeat(90)));
// { isValid: true, byteLength: 270, maxBytes: 255, remaining: -15, charLength: 90 }

実行結果

{ isValid: true, byteLength: 11, maxBytes: 255, remaining: 244, charLength: 11 }
{ isValid: false, byteLength: 270, maxBytes: 255, remaining: -15, charLength: 90 }

<textarea id="input" maxlength="1000"></textarea>
<p id="counter"></p>

<script>
const MAX_BYTES = 255;
const encoder = new TextEncoder();
const input = document.getElementById('input');
const counter = document.getElementById('counter');

input.addEventListener('input', () => {
  const bytes = encoder.encode(input.value).length;
  const remaining = MAX_BYTES - bytes;

  counter.textContent = `${bytes} / ${MAX_BYTES} バイト（残り ${remaining} バイト）`;
  counter.style.color = remaining < 0 ? 'red' : '#333';
});
</script>

function truncateByBytes(str, maxBytes) {
  const encoder = new TextEncoder();
  const encoded = encoder.encode(str);

  // バイト数が制限以内ならそのまま返す
  if (encoded.length <= maxBytes) {
    return str;
  }

  // maxBytes で切り詰め、デコードして安全な文字列に戻す
  const decoder = new TextDecoder('utf-8', { fatal: false });
  const truncated = decoder.decode(encoded.slice(0, maxBytes));

  // 末尾の不完全な文字（U+FFFD）を除去
  return truncated.replace(/\uFFFD$/, '');
}

// 使用例
console.log(truncateByBytes('Hello World', 5));      // "Hello"
console.log(truncateByBytes('こんにちは', 9));   // "こんに"
console.log(truncateByBytes('こんにちは', 10));  // "こんに"（10バイト目は「ち」の途中）
console.log(truncateByBytes('ABC?DEF', 7));   // "ABC?"

実行結果

Hello
こんに
こんに
ABC?

function truncateByBytesWithEllipsis(str, maxBytes, ellipsis = '...') {
  const encoder = new TextEncoder();

  // 全体がバイト制限以内ならそのまま
  if (encoder.encode(str).length <= maxBytes) {
    return str;
  }

  const ellipsisBytes = encoder.encode(ellipsis).length;
  const targetBytes = maxBytes - ellipsisBytes;

  // 省略記号分を差し引いた文字列を切り詰め
  const decoder = new TextDecoder('utf-8', { fatal: false });
  const encoded = encoder.encode(str);
  let truncated = decoder.decode(encoded.slice(0, targetBytes));
  truncated = truncated.replace(/\uFFFD$/, '');

  return truncated + ellipsis;
}

// 使用例
console.log(truncateByBytesWithEllipsis('こんにちは世界', 15));
// "こんにち..." (12 + 3 = 15バイト)

実行結果

こんにち...

const str = 'テスト文字列 Test String ?';
const ITERATIONS = 100_000;

// 1. TextEncoder
const encoder = new TextEncoder();
console.time('TextEncoder');
for (let i = 0; i < ITERATIONS; i++) {
  encoder.encode(str).length;
}
console.timeEnd('TextEncoder');

// 2. Blob
console.time('Blob');
for (let i = 0; i < ITERATIONS; i++) {
  new Blob([str]).size;
}
console.timeEnd('Blob');

// 3. encodeURIComponent
console.time('encodeURIComponent');
for (let i = 0; i < ITERATIONS; i++) {
  encodeURIComponent(str).replace(/%[0-9A-F]{2}/gi, 'x').length;
}
console.timeEnd('encodeURIComponent');

ポイント：TextEncoder はインスタンスを使い回すことでさらにパフォーマンスが向上します。ループ内で new TextEncoder() を毎回呼ぶのは避けましょう。

環境別の推奨メソッド

• モダンブラウザ: TextEncoder（最もシンプルで高速）
• レガシーブラウザ対応: encodeURIComponent（IE含む全ブラウザ対応）
• Node.js: Buffer.byteLength（最もメモリ効率が高い）
• ユニバーサル: TextEncoder（ブラウザ・Node.js 両対応）

// MySQL VARCHAR のバイト数制限チェック
function validateForMySQL(value, varcharLength, charset = 'utf8mb4') {
  const encoder = new TextEncoder();
  const bytes = encoder.encode(value).length;

  // MySQL の VARCHAR は文字数制限だが、行サイズにバイト制限がある
  const maxBytesPerChar = charset === 'utf8mb4' ? 4 : 3;
  const maxBytes = varcharLength * maxBytesPerChar;

  return {
    charLength: [...value].length,
    byteLength: bytes,
    maxBytes,
    isValid: bytes <= maxBytes,
  };
}

console.log(validateForMySQL('テストデータ', 255));
// { charLength: 5, byteLength: 15, maxBytes: 1020, isValid: true }

function checkPayloadSize(data, maxMB = 1) {
  const json = JSON.stringify(data);
  const encoder = new TextEncoder();
  const bytes = encoder.encode(json).length;
  const maxBytes = maxMB * 1024 * 1024;

  return {
    sizeKB: (bytes / 1024).toFixed(2),
    sizeMB: (bytes / 1024 / 1024).toFixed(4),
    maxMB,
    isWithinLimit: bytes <= maxBytes,
  };
}

const payload = { name: 'テストユーザー', bio: 'あ'.repeat(10000) };
console.log(checkPayloadSize(payload, 1));
// { sizeKB: "29.36", sizeMB: "0.0287", maxMB: 1, isWithinLimit: true }

function checkURLLength(baseUrl, params) {
  const url = new URL(baseUrl);
  Object.entries(params).forEach(([key, val]) => {
    url.searchParams.set(key, val);
  });

  const fullUrl = url.toString();
  const MAX_URL_LENGTH = 2048;

  return {
    length: fullUrl.length,
    isValid: fullUrl.length <= MAX_URL_LENGTH,
    url: fullUrl,
  };
}

const result = checkURLLength(
  'https://example.com/search',
  { q: 'JavaScript バイト数 取得方法' }
);
console.log(result.length, result.isValid);
// 99 true

function getStorageUsage() {
  let totalBytes = 0;
  const encoder = new TextEncoder();

  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    totalBytes += encoder.encode(key).length;
    totalBytes += encoder.encode(value).length;
  }

  const MAX_BYTES = 5 * 1024 * 1024; // 約5MB
  return {
    usedKB: (totalBytes / 1024).toFixed(2),
    usedPercent: ((totalBytes / MAX_BYTES) * 100).toFixed(2) + '%',
    remainingKB: ((MAX_BYTES - totalBytes) / 1024).toFixed(2),
  };
}

console.log(getStorageUsage());
// { usedKB: "12.50", usedPercent: "0.24%", remainingKB: "5107.50" }

const encoder = new TextEncoder();
const decoder = new TextDecoder('utf-8', { fatal: false });

/** UTF-8 バイト数を取得 */
export function getByteLength(str) {
  return encoder.encode(str).length;
}

/** バイト数が制限以内か判定 */
export function isWithinByteLimit(str, maxBytes) {
  return getByteLength(str) <= maxBytes;
}

/** 指定バイト数で安全に切り詰め */
export function truncateByBytes(str, maxBytes, ellipsis = '') {
  const encoded = encoder.encode(str);
  if (encoded.length <= maxBytes) return str;

  const ellipsisBytes = encoder.encode(ellipsis).length;
  const target = maxBytes - ellipsisBytes;
  let result = decoder.decode(encoded.slice(0, target));
  result = result.replace(/\uFFFD$/, '');
  return result + ellipsis;
}

/** バリデーション結果を返す */
export function validateByteLength(str, maxBytes) {
  const byteLength = getByteLength(str);
  return {
    isValid: byteLength <= maxBytes,
    byteLength,
    maxBytes,
    remaining: maxBytes - byteLength,
  };
}

import { getByteLength, truncateByBytes, validateByteLength } from './byteUtils.js';

console.log(getByteLength('Hello世界?'));  // 15

console.log(truncateByBytes('こんにちは世界', 15, '...'));
// "こんにち..."

console.log(validateByteLength('テスト', 255));
// { isValid: true, byteLength: 9, maxBytes: 255, remaining: 246 }

記事のポイント

• 文字数とバイト数は別物。日本語は1文字=3バイト（UTF-8）、絵文字は4バイト以上
• ブラウザでは TextEncoder が最も推奨される方法
• Node.js では Buffer.byteLength が最もメモリ効率がよい
• バイト数制限がある場合、切り詰め関数で文字化けを防ぐ
• DB のカラムサイズや API の制限はバイト単位で管理されることが多い
• 絵文字（特に ZWJ シーケンス）は見た目1文字でも大量のバイトを消費する

あわせて読みたい

• 【JavaScript】文字列から任意の1文字を取得する方法
• 【JavaScript】文字列を逆順に並び替える方法
• 【JavaScript】文字列からASCIIコードに変換する3つの方法
• 【JavaScript】Unicodeコードポイントから文字列を生成する方法
• 【JavaScript】文字列内の特定文字の出現回数をカウントする方法
• 【JavaScript】文字列を1文字ずつ表示する方法
• 【JavaScript】match()メソッドで文字列パターンを簡単に検索する方法