如何在JSX中用if-else替代双if实现YouTube/Vimeo链接转换？

我来帮你搞定这个问题！你想要把两个独立的if语句改成互斥的if-else逻辑，实现二选一的链接转换，但目前只有第一个判断生效，问题出在没有先处理链接的有效性判断，以及逻辑结构的小问题上。

修正后的代码方案 #

首先，我们需要先确保视频链接是有效的（非undefined/null），再用if-else if实现互斥判断：

// 先校验链接有效性，避免后续字符串操作报错
if (videoUrl !== undefined && videoUrl !== null) {
  if (videoUrl.indexOf('youtube') !== -1) {
    videoUrl = videoUrl.replace("watch?v=", "embed/");
  } else if (videoUrl.indexOf('vimeo') !== -1) {
    videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
  }
  // 可选：添加else分支处理既不是YouTube也不是Vimeo的链接
  // else { /* 比如保持原链接或抛出提示 */ }
}

更简洁的优化版本 #

用includes替代indexOf（ES6+支持），同时用更简洁的方式判断链接有效性：

// 简洁判断：自动过滤undefined、null、空字符串
if (videoUrl) {
  if (videoUrl.includes('youtube')) {
    videoUrl = videoUrl.replace("watch?v=", "embed/");
  } else if (videoUrl.includes('vimeo')) {
    videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
  }
}

为什么原来的写法会出问题？ #

如果你直接把两个独立的if改成if...else if但没先做有效性判断，当videoUrl是undefined或null时，调用indexOf会直接抛出错误，导致后续逻辑根本无法执行。另外，独立的if会依次检查两个条件，而if-else if会在匹配到第一个条件后就跳过后续判断，正好符合你“二选一”的需求。

额外提示 #

如果你的业务场景中需要处理更复杂的链接格式（比如YouTube的短链接、带参数的Vimeo链接），可以考虑用正则表达式来替换，比如：

// YouTube链接的正则替换（兼容更多格式）
videoUrl = videoUrl.replace(/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)/, 'https://www.youtube.com/embed/');

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