如何创建基于两个变量的条件字符串，而无需一堆 if else (JavaScript)

Question

我正在尝试创建一个要显示给用户的自定义字符串，它基于两个变量。

这是我要构建的示例：

let url1;
let url2;
if (containsData1) {
  url1 = "http://test";
}

if (containsData2) {
  url2 = "http://test2";
}

let finalString = '';
if (url1 && url2) {
  finalString = 'The url 1 is ' + url1 + ' and url 2 is ' + url2;
} else if (!url1 && url2) {
  finalString = 'There isnt data for url1. Url2 is ' + url2;
} else if (url1 && !url2) {
  finalString = 'The url 1 is ' + url1 + '. There isnt data for url2';
} else if (!url1 && !url2) {
  finalString = 'There isnt data for url1. There isnt data for url2';
}

但是我想以适当的方式做到这一点，而不使用这一堆 if else，关于如何完成这个有什么建议吗？

谢谢。

Answer 1

你可以使用三元语句：

let url1;
let url2;
url1 = "http://test";
url2 = "http://test2";
let finalString = (url1 ? 'The url 1 is ' + url1 : 'There isnt data for url1.') +
  (url1 && url2 ? ' and t' : ' T') +
  (url2 ? 'he url 2 is ' + url2 : 'There isnt data for url2.');

console.log(finalString)

Answer 2

1st - 使用 ES6 字符串模板

let url1;
let url2;
if (containsData1) {
  url1 = "http://test";
}

if (containsData2) {
  url2 = "http://test2";
}

let finalString = '';
if (url1 && url2) {
  finalString = `The url 1 is ${ url1 } and url 2 is ${ url2 }`;
} else if (!url1 && url2) {
  finalString = `There isnt data for url1. Url2 is ${ url2 }`;
} else if (url1 && !url2) {
  finalString = `The url 1 is ${ url1 }. There isnt data for url2`;
} else if (!url1 && !url2) {
  finalString = 'There isnt data for url1. There isnt data for url2';
}

第 2 - 统一和提取

const urls = {
  url1: containsData1 ? "http://test" : null,
  url2: containsData2 ? "http://test" : null,
}

const assertData = name => urls[name] ? `${name} is ${urls[name]}` : `isnt data for ${name}`

let finalString = `${assertData('url1')}. ${assertData('url2')}`

Answer 3

我相信我们可以通过三元语句得到更精确的结果：

let url1 = containsData1;
let url2 = containsData2;

let finalString = url1 ? `The url 1 is ${url1}` : 'There is no data for url 1';

if (url1 && url2) {finalString += ` and url 2 is ${url2}.`}
if (!url2) {finalString += '. There is no data for url2.'}

Answer 4

最好将其视为两个不同的条件字符串，然后将它们连接在一起：

let string1;
if (url1) {
  string1 = 'The url 1 is ' + url1 + '.';
} else {
  string1 = 'There isnt data for url1.';
}

let string2;
if (url2) {
   string2 = 'Url2 is ' + url2;
} else {
  string2 = 'There isnt data for url2';
}

let finalString = string1 + string2;

与一次考虑每种可能的情况相比，这使您能够以更直接的方式对结果字符串进行推理。只有两个变量，你有 4 种可能的结果，有 4 种你会有 16。

将每个变量分开意味着您在生成每个子字符串时无需关心其他可能性。

您可以使用模板进一步简化思考。在那种情况下，您可以在其他地方分离字符串生成逻辑，这样您就可以在不同的领域专注于不同的事情

弄清楚每条消息应该是什么
弄清楚如何显示它们

例如，您可能希望将消息标准化并具有类似的东西：

function makeSubMessage(url, name) {
  if (url) {
    return `The $[name} is ${url}`;
  } else {
    return `No data for ${name}`;
  }
}
/* ... */
let string1 = makeSubMessage(url1, "Url1");

这将使您可以更轻松地交换消息的格式，而无需触及它们的呈现方式。

当您展示它们时，您可能希望将每条消息放在单独的行中，而不是简单地放在一个字符串中，因此结果不必依赖于子消息是什么：

function(urls) {
  let finalString = "";
  for (let i = 0; i < urls.length; i++) {
    let subMessage = makeSubMessage(urls[i], "Url" + (i + 1));
    finalString += subMessage;
    finalString += "\n"
  }

  return finalString;
}

或者您可以完全更改此实现：

function(urls) {
  let finalString = urls
    .map((url, i) => makeSubMessage(url, "Url" + (i + 1)))
    .join("\n")

  return finalString;
}

或更改为将它们显示为 HTML 个要点，也许：

function(urls) {
  let finalString = urls
    .map((url, i) => makeSubMessage(url, "Url" + (i + 1)))
    .map(subMessage => `<li>${subMessage}</li>`)
    .join("<br/>")

  return `<ul>${finalString}</ul>`;
}

或其他任何东西。重点是问题现在分开了。

如何创建基于两个变量的条件字符串，而无需一堆 if else (JavaScript)

How to create a conditional string that's based on two variables without a bunch of if elses (JavaScript)

javascript

string

representation

conditional-statements