JavaScript视频标签生成函数异常：调用后返回undefined

问题背景 #

需要实现一个JavaScript函数，接收src、width、controls三个参数，生成符合要求的<video>标签：

• 标签无多余空白字符，属性间用单个空格分隔
• 替换所有单引号为双引号，最终属性值用双引号包裹
• 若width或controls无有效输入，则不显示对应属性
  现有代码调用后返回undefined，需排查并修复。

原代码核心问题 #

• 变量未声明：result变量未用let/const声明，且部分分支未给其赋值，导致无返回值
• 参数处理错误：未考虑参数为undefined或空字符串的情况，直接调用replace会抛出错误；正则表达式replace(/"+/g)缺少替换目标，无法正确清理引号
• 逻辑判断完全失效：通过cleanedVid[1]这种字符串索引判断参数状态，逻辑完全错误，无法识别width/controls是否有效
• 分支覆盖不全：多个if条件互相覆盖，且return位置错误，多数场景无法返回结果

修复后的代码 #

function createVideo(src, width, controls) {
  // 清理src：移除单双引号、多余空格，src为必填项，无值返回空
  const cleanSrc = (src || '').replace(/['"]/g, '').trim();
  if (!cleanSrc) return '';

  const attributes = [`src="${cleanSrc}"`];

  // 处理width：非空且为有效数字时添加属性
  const cleanWidth = (width || '').replace(/['"]/g, '').trim();
  if (cleanWidth && !isNaN(parseInt(cleanWidth, 10))) {
    attributes.push(`width="${cleanWidth}"`);
  }

  // 处理controls：存在有效输入时添加属性
  const cleanControls = (controls || '').trim();
  if (cleanControls) {
    attributes.push('controls');
  }

  // 拼接成最终标签，属性间用单个空格分隔
  return `<video ${attributes.join(' ')}></video>`;
}

// 测试调用
console.log(
  createVideo(
    "http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4",
    " ",
    "controls"
  )
);
// 输出：<video src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_60fps_normal.mp4" controls></video>

修复说明 #

• 给所有参数添加默认值处理，避免undefined调用字符串方法报错
• 动态构建属性数组，通过join(' ')确保属性间只有一个空格，无多余空白
• 严格判断width的有效性：仅当输入非空且为有效数字时，才添加width属性
• 统一清理单双引号，最终属性值用双引号包裹，符合需求
• 确保所有分支都有明确返回值，彻底解决返回undefined的问题

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