后端未返回address字段时调用replaceAll方法报错如何解决

从后端获取的address字段接口默认返回全大写值，需求是将其处理为仅每个单词首字母大写的格式。目前格式转换逻辑已实现，但接口未返回address值时，控制台抛出错误：
Cannot read properties of undefined (reading 'replaceAll')

已经在HTML模板渲染逻辑中添加了address值的存在性判断，仅当address值存在时才渲染对应地址内容，不存在时返回null，但仍然触发上述报错。

相关实现代码如下：

JS逻辑代码 #

const upperCaseFirstLetter = (string) => 
`${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;

const lowerCaseAllWordsExceptFirstLetters = (string) =>
 string.replaceAll(/\S*/g, (word) => `${word.slice(0, 1)}${word.slice(1).toLowerCase()}`
);

let address = '';
address = upperCaseFirstLetter(lowerCaseAllWordsExceptFirstLetters(props.policy.assets.address));

模板代码 #

<div className="policycard__subinfo">
  {props.policy.assets.address ? (t('policy.policy-cards.address') + address) : null}
</div>

模板里的条件判断只控制最终DOM的渲染逻辑，但是address的格式转换代码是在模板渲染之前同步执行的，不管address是否存在，转换函数都会被调用。当接口没返回address时，传入lowerCaseAllWordsExceptFirstLetters的参数是undefined，函数内部直接调用undefined.replaceAll就会触发类型错误。

在转换逻辑执行前就做好空值兜底，有两种可选实现方式：

• 方式1：赋值前先判断原始地址值是否存在，不存在直接给空字符串，不执行转换逻辑

const upperCaseFirstLetter = (string) => 
`${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;

const lowerCaseAllWordsExceptFirstLetters = (string) =>
 string.replaceAll(/\S*/g, (word) => `${word.slice(0, 1)}${word.slice(1).toLowerCase()}`
);

let address = '';
const rawAddress = props.policy.assets?.address;
address = rawAddress ? upperCaseFirstLetter(lowerCaseAllWordsExceptFirstLetters(rawAddress)) : '';

• 方式2：给两个转换函数的入参加默认空字符串兜底，从工具层避免传空报错

// 入参默认赋值为空字符串，传入undefined时会自动使用默认值
const upperCaseFirstLetter = (string = '') => 
`${string.slice(0, 1).toUpperCase()}${string.slice(1)}`;

const lowerCaseAllWordsExceptFirstLetters = (string = '') =>
 string.replaceAll(/\S*/g, (word) => `${word.slice(0, 1)}${word.slice(1).toLowerCase()}`
);

模板部分可以补充可选链操作符，避免props.policy.assets本身不存在时的报错：

<div className="policycard__subinfo">
  {props.policy.assets?.address ? (t('policy.policy-cards.address') + address) : null}
</div>

内容的提问来源于stack exchange，提问作者jron