如何添加如果...JSX 中的 else 语句没有 2 个 if 语句?

Question

我有两个用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 有效。

Answer 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);

Answer 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;

或类似的东西 - 现在这是不可读的！

Answer 3

我会这样写：

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