无法读取未定义的属性（读取“子字符串”）

作者

无法读取未定义的属性（读取 ‘substring’）

Cannot read Property ‘substring’ of Undefined in JavaScript

substring()在值上调用方法时发生“无法读取未定义的属性（读取‘substring’）”错误undefined。

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

无法读取未定义的属性子串

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

索引.js
const str = undefined;

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

要解决此错误，请将变量的值初始化为空字符串，或确保仅对字符串调用
String.substring()
方法。

索引.js
const someVar = undefined;

// ✅ Initialize to empty string
const str = someVar || ''; // 👉️ ""

// ✅ Using ternary operator
const result1 = typeof str === 'string' ? str.substring(1) : '';
console.log(result1); // 👉️ ""

// ✅ Using optional chaining (?.)
const result2 = str?.substring(1) || '';
console.log(result2); // 👉️ ""

// ✅ Using if/else statement
if (typeof str === '') {
  const result3 = str.substring(1);
} else {
  console.log('str is not a string');
}

// ✅ Initialize to empty string
const result4 = (str || '').substring(1);
console.log(result4); // 👉️ ""

我们使用逻辑 OR (||) 运算符来提供备用值，以防变量存储虚假值（例如undefined）。

索引.js
const someVar = undefined;

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

console.log(str.substring(1)); // 👉️ ""

如果左边的值为 falsy，则逻辑 OR (||) 运算符返回右边的值。

下一个示例使用
三元运算符，它与语句非常相似if/else。

索引.js
const str = undefined;

const result1 = typeof str === 'string' ? str.substring(1) : '';
console.log(result1); // 👉️ ""
如果问号左边的表达式是假的（例如），则返回冒号左边的值，否则返回冒号右边的值。 undefined

换句话说，如果str变量存储一个字符串，我们返回调用的结果substring，否则，我们返回一个空字符串。

下一个示例使用
可选的链接 (?.)运算符。

索引.js
const str = undefined;

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

下一个示例使用一个简单的if/else语句在调用方法之前检查值是否为字符串substring()。

索引.js
const str = undefined;

if (typeof str === '') {
  const result3 = str.substring(1);
} else {
  // 👇️ this runs
  console.log('str is not a string');
}

最后一个示例使用逻辑 OR (||) 运算符在值为 falsy 时提供回退。

索引.js
const str = undefined;

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

发生错误的常见原因是：

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

解决使用数组时的错误

下面是一个示例，说明在使用数组时错误是如何发生的。

索引.js
const arr = [];

// ⛔️ Cannot read properties of undefined (reading 'substring')
arr[0].substring(1);

要解决该错误，
请确保索引处的元素存在
且类型为字符串。

索引.js
const arr = [];

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

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

解决使用类时的错误

如果使用类，请确保声明类属性并将其设置为空字符串，然后再访问它。

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

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

  substringFirst() {
    return this.first.substring(1);
  }

  substringLast() {
    return this.last.substring(1);
  }
}

const p1 = new Person('John');
p1.substringFirst();
p1.substringLast();

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