textarea为空点击Title Case按钮触发TypeError报错求助

问题描述 #

• 开发的文本转Title Case网站功能正常，但当textarea为空时点击转换按钮会抛出错误：TypeError: Cannot read properties of undefined (reading 'toUpperCase')
• 确认textarea为空时变量el仍是字符串，但不理解报错原因，清楚不能对null/undefined调用toUpperCase，但el不属于这类情况

相关代码 #

titleCase.addEventListener("click", function () {
  const exceptions = [
    "a",
    "and",
    "as",
    "but",
    "by",
    "down",
    "for",
    "from",
    "if",
    "in",
    "into",
    "like",
    "near",
    "nor",
    "of",
    "off",
    "on",
    "once",
    "onto",
    "or",
    "over",
    "past",
    "so",
    "than",
    "that",
    "to",
    "upon",
    "when",
    "with",
    "yet",
  ];
  const transformation = textArea.value
    .toLowerCase()
    .split(" ")
    .map((el) =>
      exceptions.includes(el) ? el : el[0].toUpperCase() + el.slice(1)
    )
    .join(" ");
  textArea.value = transformation[0].toUpperCase() + transformation.slice(1);
});

报错原因 #

1. 空字符串分割陷阱：当textArea.value为空时，split(" ")会返回[""]（一个包含空字符串的数组）。此时map遍历到的el是空字符串""，访问el[0]会得到undefined，调用undefined.toUpperCase()直接触发报错。
2. 最终转换的空值问题：即使前面的map没报错，空输入经过处理后transformation会是空字符串，此时transformation[0]也是undefined，最后一行的transformation[0].toUpperCase()同样会报错。

解决方法 #

方案1：前置判断输入是否为空 #

在处理逻辑前先检查输入，为空则直接返回，避免后续无效操作：

titleCase.addEventListener("click", function () {
  // 检查输入是否为空或仅含空白字符
  if (!textArea.value.trim()) {
    textArea.value = "";
    return;
  }

  const exceptions = [
    "a", "and", "as", "but", "by", "down", "for", "from", "if", "in",
    "into", "like", "near", "nor", "of", "off", "on", "once", "onto",
    "or", "over", "past", "so", "than", "that", "to", "upon", "when",
    "with", "yet",
  ];
  const transformation = textArea.value
    .toLowerCase()
    .split(" ")
    .map((el) =>
      exceptions.includes(el) ? el : el[0].toUpperCase() + el.slice(1)
    )
    .join(" ");
  textArea.value = transformation[0].toUpperCase() + transformation.slice(1);
});

方案2：用可选链操作符防御空值 #

在访问el[0]和transformation[0]时使用可选链（?.），避免undefined调用方法：

titleCase.addEventListener("click", function () {
  const exceptions = [
    "a", "and", "as", "but", "by", "down", "for", "from", "if", "in",
    "into", "like", "near", "nor", "of", "off", "on", "once", "onto",
    "or", "over", "past", "so", "than", "that", "to", "upon", "when",
    "with", "yet",
  ];
  const transformation = textArea.value
    .toLowerCase()
    .split(" ")
    .map((el) =>
      exceptions.includes(el) ? el : el[0]?.toUpperCase() + el.slice(1)
    )
    .join(" ");
  textArea.value = transformation[0]?.toUpperCase() + transformation.slice(1);
});

当el[0]或transformation[0]为undefined时，表达式会返回undefined，拼接空字符串后结果仍是空字符串，不会报错。

方案3：过滤空字符串分割结果 #

在split后过滤掉空字符串，避免处理无效元素：

titleCase.addEventListener("click", function () {
  const exceptions = [
    "a", "and", "as", "but", "by", "down", "for", "from", "if", "in",
    "into", "like", "near", "nor", "of", "off", "on", "once", "onto",
    "or", "over", "past", "so", "than", "that", "to", "upon", "when",
    "with", "yet",
  ];
  const transformation = textArea.value
    .toLowerCase()
    .split(" ")
    .filter(el => el.trim() !== "") // 过滤空字符串和仅含空白的元素
    .map((el) =>
      exceptions.includes(el) ? el : el[0].toUpperCase() + el.slice(1)
    )
    .join(" ");
  // 最后一行仍需判断，避免空字符串导致的报错
  textArea.value = transformation ? transformation[0].toUpperCase() + transformation.slice(1) : "";
});

内容的提问来源于stack exchange，提问作者Daddyx69x