如何在没有 2 个 if 语句的情况下在 JSX 中添加 If...Else 语句？答案

【问题标题】：How to Add If…Else Statements in JSX without having 2 if statement?如何在没有 2 个 if 语句的情况下在 JSX 中添加 If...Else 语句？
【发布时间】：2018-10-25 22:31:26
【问题描述】：

我有两个用 ReactJS 编写的 if 语句。

if (videoUrl !== undefined && videoUrl !== null && videoUrl.indexOf('youtube') !== -1) 
{
   videoUrl = videoUrl.replace("watch?v=", "embed/")
}
if (videoUrl !== undefined && videoUrl !== null && videoUrl.indexOf('vimeo') !== -1) 
{
   videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/")
}

我不知道如何制作这些if else 声明，因此它可以在 youtube 或 Vimeo 之间进行检查。现在我只能使用一个 if 语句。如果我将两个 if 语句都留在该位置，则第一个 if 有效。

【问题讨论】：

你的逻辑需要 2 个 if 语句......所以，不知道你为什么认为你可以用一个来做到这一点
您是否尝试将第二个语句中的if 替换为else if？
是的，您的问题没有得到很好的解释，是吗。你似乎说你不想要 2 if's ... 没有意识到你想要 more

标签： javascript reactjs redux jsx

【解决方案1】：

你不需要那么多if，只需检查字符串

let videoUrl = 'https://vimeo.com/';
if (typeof videoUrl === 'string') {

  if(videoUrl.indexOf('youtube') !== -1) {
     videoUrl = videoUrl.replace("watch?v=", "embed/");
   }
   if (videoUrl.indexOf('vimeo') !== -1) {
     videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
   }
}

console.log(videoUrl);

// Another option is to use regex
videoUrl = 'https://vimeo.com/';
if (/youtube/.test(videoUrl)) {
   videoUrl = videoUrl.replace("watch?v=", "embed/");
}
if (/vimeo/.test(videoUrl)) {
  videoUrl = videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/");
}
console.log(videoUrl);

【讨论】：

if (videoUrl.includes('youtube')) 有什么问题：p
@JaromandaX String.prottype.includes() 并非所有浏览器都支持
所以？谁真的在乎 IE？无论如何它都可以填充：p
@JaromandaX 没错，但我更喜欢使用正则表达式 /youtube/.test(videoUrl)
通过包含我希望的 polyfill，@ZohaibIjaz ... String.prototype.includes = function(search, start) { return !!~this.indexOf(search, start); }

【解决方案2】：

就这么简单：

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/")
    }
}

这消除了重复检查，并且更易于阅读。除非您开始使用 ?: 运算符玩游戏，否则您无法使用单个 if 轻松做到这一点。

其实我们来玩游戏吧！

videoUrl = (videoUrl !== undefined && videoUrl !== null) ?
              (videoUrl.indexOf('youtube') !== -1) ? 
                  videoUrl.replace("watch?v=", "embed/") :
                  (videoUrl.indexOf('vimeo') !== -1) ?
                      videoUrl.replace("https://vimeo.com/", "https://player.vimeo.com/video/") :
                  null :
               null;

或者类似的东西 - 现在那个是不可读的！

【讨论】：

【解决方案3】：

我会这样写：

if (typeof videoUrl !== 'undefined' && videoUrl) {
  if (videoUrl.indexOf('youtube') !== -1) {
    //first case here
  } else if (videoUrl.indexOf('vimeo') !== -1){
    //second case here
  }
}

【讨论】：

typeof videoUrl !== 'undefined' && 冗余