无法在 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); // 👉️ ""
发生错误的常见原因是:
- 在未初始化为字符串的类属性上调用方法
- 在不存在的数组索引上调用方法
解决使用数组时的错误
下面是一个示例,显示使用数组时抛出的错误。
索引.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
。如果我们不这样做,我们就会在尝试访问属性时遇到错误。