无法在 JS 中读取未定义的属性（读取“trim”）

作者

无法在 JS 中读取未定义的属性（读取 ‘trim’）

TypeError: Cannot read property ‘trim’ of Undefined in JS

“TypeError: Cannot read properties of undefined (reading ‘trim’)”错误发生在trim()对undefined值调用方法时。

要解决此错误，请将值初始化为空字符串或确保仅对trim字符串调用该方法。

无法读取未定义的属性修剪

下面是错误如何发生的示例。

索引.js
const str = undefined;

// ⛔️ TypeError: Cannot read properties of undefined (reading 'trim')
str.trim();

要解决此错误，请将变量的值初始化为空字符串或确保仅对字符串调用
String.trim()方法。这里有几种方法可以做到这一点。

使用逻辑或 (||) 运算符提供后备

解决该错误的一种方法是使用
逻辑 OR (||)运算符提供空字符串的回退。

索引.js
const myVar = undefined;

const str = myVar || ''; // 👉️ ""

如果逻辑或 (||) 运算符左侧的值是假的（例如
undefined），则运算符返回右侧的值。

使用三元运算符

或者，您可以使用与
语句非常相似的三元运算符if/else。

索引.js
const str = undefined;

const result1 = typeof str === 'string' ? str.trim() : '';
console.log(result1); // 👉️ ""
如果问号左边的表达式为真，则返回冒号左边的值，否则返回冒号右边的值。

使用可选的链接 (?.) 运算符

您还可以使用
可选的链接 (?.)运算符来避免错误。

索引.js
const str = undefined;

const result2 = str?.trim() || '';
console.log(result2); // 👉️ ""
null如果左边的值等于or ，运算符将短路而不是抛出错误undefined。

在调用之前检查值是否为字符串trim()

或者，您可以使用一个简单的if/else语句来检查变量是否在调用之前存储了一个字符串trim()。

索引.js
const str = undefined;

if (typeof str === '') {
  const result3 = str.trim();
} else {
  console.log('str is not a string');
}


在调用方法之前，我们使用typeof运算符检查
变量是否存储了字符串String.trim()。

就地提供回退值

您还可以使用逻辑 OR (||) 运算符在调用方法之前提供后备权trim()。

索引.js
const str = undefined;

const result4 = (str || '').trim();
console.log(result4); // 👉️ ""

发生错误的常见原因是：

  1. 在未初始化为字符串的类属性上调用方法
  2. 在不存在的数组索引上调用方法

解决使用数组时的错误

下面是一个示例，显示使用数组时抛出的错误。

索引.js
const arr = [];

// 👇️ Cannot read properties of undefined (reading 'trim')
arr[0].trim();

要解决该错误，请确保索引处的元素可用并且是一个字符串。

索引.js
const arr = [];

const result = typeof arr?.[0] === 'string' ? arr[0].trim() : '';
console.log(result); // 👉️ ""

在调用该trim方法之前，我们检查特定索引处的数组元素是否为字符串。

解决使用类时的错误

如果使用类，则必须在访问它之前声明类属性并将其设置为空字符串。

索引.js
class Person {
  // ✅ Initialize to an empty string
  last = '';

  // ✅ Initialize from parameters
  constructor(first) {
    this.first = first;
  }

  trimFirst() {
    return this.first.trim();
  }

  trimLast() {
    return this.last.trim();
  }
}

const p1 = new Person(' John   ');
p1.trimFirst();
p1.trimLast();

first我们初始化了和class 属性的值last。如果我们不这样做，我们就会在尝试访问属性时遇到错误。