【JavaScript】文字列の長さを取得する方法｜length プロパティ・サロゲートペア対応・バイト数・配列の length まで解説

const len = str.length;
// 戻り値: 文字列の UTF-16 コードユニット数（0 以上の整数）
// 読み取り専用（代入しても変更されない）

console.log("Hello".length);     // 5
console.log("こんにちは".length); // 5
console.log("".length);           // 0（空文字）
console.log(" ".length);          // 1（半角スペース）
console.log("Hello World".length); // 11（スペースも1文字）

// "Hello".length()  // TypeError: "Hello".length is not a function
"Hello".length       // 5（正しい）

const text = "Hello?";

console.log(text.length);     // 7（"Hello"=5 + ?=2）
console.log([...text].length); // 6（見た目の文字数）

function visualLength(str) {
  return [...str].length;
}

console.log(visualLength("Hello?"));   // 6
console.log(visualLength("こんにちは?")); // 6
console.log(visualLength("?野家"));     // 3

const family = "?‍?‍?‍?"; // 家族絵文字（ZWJ シーケンス）

console.log(family.length);     // 11
console.log([...family].length); // 7（ZWJ と各絵文字がバラバラに）

function graphemeLength(str) {
  const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" });
  return [...segmenter.segment(str)].length;
}

console.log(graphemeLength("Hello?"));    // 6
console.log(graphemeLength("?‍?‍?‍?"));       // 1（正確！）
console.log(graphemeLength("??"));         // 1（国旗も正確）

function byteLength(str) {
  return new TextEncoder().encode(str).length;
}

console.log(byteLength("ABC"));     // 3（ASCII: 1バイト×3）
console.log(byteLength("あいう"));  // 9（日本語: 3バイト×3）
console.log(byteLength("?"));      // 4（絵文字: 4バイト）

// 文字列: 読み取り専用
const str = "Hello";
console.log(str.length); // 5
// str.length = 3;       // 無視される（strict mode ではエラー）

// 配列: 書き込み可能
const arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr); // [1, 2, 3]（末尾が切り捨てられる）

function isEmpty(str) {
  return !str || str.length === 0;
}

console.log(isEmpty(""));        // true
console.log(isEmpty(null));      // true
console.log(isEmpty(undefined)); // true
console.log(isEmpty("Hello"));   // false

// 空白のみも空とみなす場合
function isBlank(str) {
  return !str?.trim();
}
console.log(isBlank("   ")); // true

<textarea id="message" maxlength="200" placeholder="メッセージを入力"></textarea>
<p><span id="charCount">0</span> / 200</p>

const textarea = document.getElementById("message");
const counter = document.getElementById("charCount");

textarea.addEventListener("input", () => {
  counter.textContent = textarea.value.length;
});

function truncate(str, maxLength) {
  if (str.length <= maxLength) return str;
  return str.slice(0, maxLength) + "...";
}

console.log(truncate("JavaScriptで文字列の長さを取得する方法", 15));
// "JavaScriptで文字列の..."

function validatePassword(password) {
  const errors = [];

  if (password.length < 8) {
    errors.push("8文字以上で入力してください");
  }
  if (password.length > 64) {
    errors.push("64文字以下で入力してください");
  }

  return errors.length === 0
    ? { valid: true }
    : { valid: false, errors };
}

console.log(validatePassword("abc"));
// { valid: false, errors: ["8文字以上で入力してください"] }