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

Cannot read property ‘toUpperCase’ of Undefined in JS

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

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

无法读取未定义的大写属性

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

索引.js


const str = undefined;

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

要解决此错误，请将变量的值初始化为空字符串，或确保仅对字符串调用
String.toUpperCase
方法。这里有些例子。

索引.js


const myVar = undefined;

// ✅ Provide empty string fallback
const str = myVar || ''; // 👉️ ""

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

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

// ✅ Using if/else
if (typeof str === '') {
  const r3 = str.toUpperCase();
} else {
  console.log('str is not a string');
}

// ✅ Provide empty string fallback
const r4 = (str || '').toUpperCase();
console.log(r4); // 👉️ ""

如果变量存储的是假值，我们使用逻辑 OR (||) 运算符提供空字符串的后备值。

索引.js


const myVar = undefined;

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

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

索引.js


const str = undefined;

const r1 = typeof str === 'string' ? str.toUpperCase() : '';
console.log(r1); // 👉️ ""

如果问号左边的表达式是假的（例如），则返回冒号左边的值，否则返回冒号右边的值。 undefined

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

索引.js


const str = undefined;

const r2 = str?.toUpperCase() || '';
console.log(r2); // 👉️ ""

undefined如果左边的值等于or ，则可选的链接 (?.) 运算符会短路而不是抛出错误null。

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

索引.js


const str = undefined;

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

The last example uses the logical OR (||) operator to provide a fallback if the
value is falsy.

index.js


const str = undefined;

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

Common reasons for the error are:

Calling the method on a class property that is not initialized to a string.
Calling the method on an array index that doesn’t exist.

# Solving the error when working with arrays

Here’s an example that shows the error being thrown when using arrays.

index.js


const arr = [];

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

To get around this, you have to make sure the element at the index is available
and a string.

index.js


const arr = [];

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

Before calling the toUpperCase method, we check if the array element at the
specific index is a string.

# Solving the error when working with classes

If using classes, you have to declare the class property and set it to an empty
string before accessing it.

index.js


class Person {
  // ✅ Initialize to an empty string
  last = '';

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

  upperFirst() {
    return this.first.toUpperCase();
  }

  upperLast() {
    return this.last.toUpperCase();
  }
}

const p1 = new Person('Tom');
p1.upperFirst();
p1.upperLast();

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