JS函数字符串参数怎么设置默认值

在日常 JavaScript 开发中，为函数参数指定默认值是一项基础且高频的操作。例如编写一个消息通知组件、格式化日志输出函数，或者封装一个根据用户角色生成问候文案的工具函数时，我们通常希望在调用方未传递参数时，函数内部能够平滑使用一个预设的字符串，避免出现 undefined 甚至运行时异常。

为字符串参数设置默认值主要有三种主流方式：现代标准的 ES6 形参默认值、处理空值与未传值的 空值合并运算符（??），以及强制过滤假值（如空字符串）的 逻辑或运算符（||）。在实际业务中，不同方案在面对 undefined、null 以及空字符串 "" 时的反应截然不同，选对方式才能避免非预期缺陷。

一、标准语法：ES6 形参默认值

ECMAScript 2015（ES6）引入了原生形参默认值语法。这是目前最规范、语义最直接的声明方式。开发者只需在定义函数时，直接在形参名称后使用赋值符号 = 并提供默认字符串字面量即可。

// 使用 ES6 原生语法设置字符串默认值
function notifyUser(message = '系统正在维护中，请稍后再试') {
  console.log(`[通知] ${message}`);
}

// 1. 不传参数：自动使用默认值
notifyUser(); 
// 输出: [通知] 系统正在维护中，请稍后再试

// 2. 传入有效字符串：使用传入的值
notifyUser('您的订单已成功发货'); 
// 输出: [通知] 您的订单已成功发货

// 3. 显式传入 undefined：触发默认值
notifyUser(undefined); 
// 输出: [通知] 系统正在维护中，请稍后再试

理解 ES6 默认参数的关键在于其底层的触发条件：只有当该参数在调用时为 undefined（包括完全未传参或实参显式为 undefined）时，JavaScript 引擎才会去计算并赋予默认值。

二、字符串参数的核心陷阱：null 与空字符串 ""

虽然 ES6 语法非常简洁，但在处理字符串类型的参数时，常常会遇到两类与预期不一致的问题：

1. 显式传入 null：前端从后端 API 获取数据时，若某个字符串字段在数据库中为空，返回的往往是 null。如果直接把这个字段传给带有 ES6 默认值的函数，由于 null !== undefined，形参不会使用默认值，而是保持 null。
2. 传入空字符串 ""：表单输入框清空后，取到的值通常是长度为 0 的空字符串 ""。对 ES6 而言，空字符串是合法的字符串实例，因此它会覆盖默认值。但在实际业务中，我们往往把“空字符串”视同于“无有效内容”，期望回退到默认值。

function greet(prefix = 'Hello') {
  console.log(`${prefix}, Developer!`);
}

greet();          // "Hello, Developer!" (正常)
greet(undefined);  // "Hello, Developer!" (正常)
greet(null);       // "null, Developer!" (非预期：默认值失效)
greet('');         // ", Developer!"     (非预期：输出前缀缺失)

为了直观对比不同实参在 ES6 默认值规则下的流向，我们可以通过下方图示进行核对：

三、进阶方案：空值合并运算符（??）与逻辑或（||）

为了针对性解决上述边缘情况，开发者可以在函数体内部配合运算符进行二次赋值与回退。

1. 空值合并运算符（Nullish Coalescing Operator: ??）

ES2020 引入的 ?? 运算符专门用于处理“空值”（即 null 或 undefined）。如果参数是 null 或未传入，它会回退到默认值；但如果传入的是空字符串 ""，它会完整保留空字符串。

function setHeading(text) {
  // 当 text 为 null 或 undefined 时，使用预设字符串；允许保留空字符串 ""
  const title = text ?? '默认标题';
  console.log(title);
}

setHeading();          // 输出: "默认标题"
setHeading(null);      // 输出: "默认标题" (成功解决 null 问题)
setHeading('');        // 输出: "" (保留空字符串)

2. 逻辑或运算符（Logical OR: ||）

如果业务规则明确规定：空字符串 "" 不能作为有效文案展示，必须强制回退为默认字符串，那么使用经典的逻辑或运算符 || 是最简便的选择。因为在 JavaScript 中，空字符串 "" 在布尔转换时属于假值（Falsy）。

function renderButton(label) {
  // 空字符串、null、undefined 都会被判定为 falsy，从而取右侧默认值
  const text = label || '点击确定';
  console.log(text);
}

renderButton();        // 输出: "点击确定"
renderButton(null);    // 输出: "点击确定"
renderButton('');      // 输出: "点击确定" (空字符串被成功替换)
renderButton('保存');  // 输出: "保存"

四、对象解构场景下的字符串默认值

当函数的字符串参数较多，或者存在多个可选配置项时，通常会将参数组织为一个配置对象（Options Pattern）。在解构对象时，可以直接对属性设置默认字符串，同时还需要为最外层对象提供一个空对象 = {} 默认值，防止外部完全不传参时引发解构 TypeError 异常。

// 针对配置对象中多个字符串参数设置默认值
function createCard({
  title = '默认卡片标题',
  description = '暂无详细描述信息',
  badgeText = 'NEW'
} = {}) {
  return `
    <div class="card">
      <h3>${title}</h3>
      <p>${description}</p>
      <span>${badgeText}</span>
    </div>
  `;
}

// 1. 完全不传参：正常解构，所有属性使用默认值
console.log(createCard());

// 2. 传空对象：仅覆盖有传值的字段
console.log(createCard({ title: '最新公告' })); 
// title 为 '最新公告'，description 和 badgeText 仍使用默认值

外层赋默认值 = {} 的必要性在于：当调用 createCard() 时，形参未收到实参，外层默认值将空对象赋给参数，解构操作 { title = ... } = {} 才能顺利执行；若缺少 = {}，执行 createCard() 会抛出 Cannot destructure property 'title' of 'undefined' 错误。

五、生产级健壮方案：类型守卫与 Trim 校验

在大型应用或公共组件库开发中，调用方传入的数据类型可能不可靠（例如误传入纯空格字符串 " "、数字 0 或对象）。如果需要实现完全健壮的字符串默认值控制，可以封装一个类型转换与安全校验函数。

/**
 * 安全解析字符串参数并赋予默认值
 * @param {*} input 待校验的输入值
 * @param {string} defaultValue 回退默认值
 * @param {boolean} allowBlank 是否允许纯空格字符串
 */
function safeString(input, defaultValue = '', allowBlank = false) {
  // 1. 确保输入为 string 类型
  if (typeof input !== 'string') {
    return defaultValue;
  }
  
  // 2. 如果不允许空白字符，进行去除首尾空格后的有效性检查
  if (!allowBlank && input.trim() === '') {
    return defaultValue;
  }

  return input;
}

// 实战使用示例
function searchArticle(keyword) {
  const finalKeyword = safeString(keyword, '全部文章');
  console.log(`正在搜索: ${finalKeyword}`);
}

searchArticle('JavaScript'); // "正在搜索: JavaScript"
searchArticle('   ');        // "正在搜索: 全部文章" (自动剔除无意义空格)
searchArticle(null);         // "正在搜索: 全部文章"
searchArticle(undefined);    // "正在搜索: 全部文章"

六、实践总结与选型决策指南

为 JS 函数字符串参数设置默认值，并不存在绝对唯一的“最优解”，而是取决于业务对数据的容忍度与语义要求。可以参考以下决策路线进行选择：

掌握了这几种设置方式及其边界差异后，在编写各类函数、组件或 API 调用封装时，就能根据具体的数据要求写出既简洁又稳健的 JavaScript 代码。