无法读取未定义的属性（读取“替换”）

作者

无法读取未定义的属性（读取“替换”）

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

replace()在存储值的变量上调用方法时，会出现“无法读取未定义的属性（读取“替换”）”错误undefined
。

要解决该错误，请确保仅对replace实现该方法的数据类型（例如字符串）调用该方法。

无法读取未定义的属性替换

以下是错误发生方式的示例。

索引.js
const str = undefined;

// ⛔️️ TypeError: Cannot read properties of undefined (reading 'replace')
str.replace('test', 'replacement');

我们replace()对一个undefined值调用该方法，因此发生了错误。

错误的另一个常见原因是访问索引不存在的数组并调用该replace()方法。

索引.js
const arr = [];

//  ⛔️️ Cannot read properties of undefined (reading 'replace')
arr[0].replace('test', 'replacement');

// ✅ Use optional chaining (?.) instead
const result = arr[0]?.replace('test', 'replacement');

将变量初始化为空字符串

解决该错误的一种方法是使用逻辑 OR (||) 运算符将变量初始化为空字符串。

索引.js
const someVar = undefined;

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

const result = str.replace('test', 'replacement');
console.log(result); // 👉️ ""

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

您还可以在调用该方法之前提供空字符串的后备
String.replace()。

索引.js
const str = undefined;

const result = (str || '').replace('test', 'replacement');
console.log(result); // 👉️ ""

如果str变量存储假值（例如undefined），则表达式replace()对空字符串调用该方法。

使用可选链接 (?.) 来解决错误

如果引用为空，您还可以使用可选的链接运算符来短路。

索引.js
const str = undefined;

const result = str?.replace('test', 'replacement') || '';

console.log(result); // 👉️ ""

如果左侧的值为空（或） ，则可选链接(?.)运算符会短路，而不是引发错误。undefinednull

使用if语句解决错误


在调用该方法之前，您可以使用typeof运算符检查
变量是否存储字符串replace()。

索引.js
const str = undefined;

if (typeof str === 'string') {
  const result = str.replace('test', 'replacement');
  console.log(result);
} else {
  // 👇️ this runs
  console.log('The variable does NOT store a string');
}

if仅当变量存储字符串时才会运行
该块，否则该else块就会运行。

使用三元运算符解决错误

您还可以使用三元运算符来解决该错误。

索引.js
const str = undefined;

const result =
  typeof str === 'string' ? str.replace('test', 'replacement') : '';

console.log(result); // 👉️ ""

三元运算符与语句非常相似if/else。

如果问号之前的表达式计算结果为真值，则返回冒号左侧的值，否则返回冒号右侧的值。

如果变量中存储的值为str假（例如undefined），我们返回一个空字符串，否则，我们返回调用该方法的结果replace
。

错误发生的常见原因

发生错误的常见原因有：

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

解决使用数组时的错误

下面的示例显示了使用数组时如何发生错误。

索引.js
const arr = [];

// ⛔️ TypeError: Cannot read properties of undefined (reading 'replace')
arr[0].replace('test', 'replacement');

要解决此问题，您必须确保索引处的元素可用且类型为字符串。

索引.js
const arr = [];

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

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

解决使用类时的错误

如果使用类，则必须声明类属性并将其设置为空字符串，然后才能访问它。

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

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

  replaceFirst() {
    return this.first.replace('test', 'replacement');
  }

  replaceLast() {
    return this.last.replace('test', 'replacement');
  }
}

const p1 = new Person('John');
p1.replaceFirst();
p1.replaceLast();

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

追踪变量被赋值的undefined位置

如果错误仍然存​​在，您必须追踪为变量赋值的位置
undefined。

值的常见来源undefined是将不返回任何内容的函数的输出分配给变量。

许多就地改变对象的内置方法都会返回undefined.

所有不返回值的 JavaScript 函数都会返回undefined.

您可能正在访问数组中不存在的索引或对象中不存在的属性。

解决使用 DOM 元素时出现的错误

如果您在使用 DOM 元素时遇到错误，请确保：

  • 您正在使用的元素存在于 DOM 中。
  • 在声明所有 HTML 元素之后，您将在正文底部插入 JS 脚本标记。

结论

replace()对值调用方法时，会出现“无法读取未定义的属性（读取“替换”）”错误undefined。

要解决该错误，请在该值等于未定义时提供后备，并在调用该方法之前有条件地检查它是否存储了正确的数据类型。