es6 javascript推荐的方法来使用三元运算符应用模板文字？

Question

I am using eslint in my development with airbnb style guide. I am getting eslint error suggest using template literals instead of string concatenation (prefer-template).

It flags this line with error

':<br><br><pre style="color:red">' + softTab + err.stack.replace(/\\n/g, '<br>' + softTab) + '</pre>' : '';

here is my code

const renderError = err => {
  const softTab = '    ';
  const errTrace = process.env.NODE_ENV !== 'production' ?
    ':<br><br><pre style="color:red">' + softTab + err.stack.replace(/\n/g, '<br>' + softTab) + '</pre>' : '';
  return renderFullPage(`Server Error${errTrace}`, {});
};

My question is what is the recommend way to apply a template literal using ternary operator? I applied it on the function return but depending on where I apply the template literal on this line causes errors. Ideally I tried doing this whole line but I get a problem with with trying to pass ${softTab} to the err.stack.replace(/\\n/g, '<br>' + softTab) any suggestions or solutions would be great. Thanks!

Answer 1

In ES6 you can use template literals instead of string concatenation. To do this you use back-tick (`)(grave-accent) character instead of double or single quotes. The template literals can contain place holders. These are indicated by the dollar sign and curly braces (${expression}). So your case:

`:<br><br><pre style="color:red">${ softTab }${ err.stack.replace(/\n/g, `<br>${softTab}`) }</pre>`

For further reading on this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

This doesn't really have a lot to do with the ternary operator. You should just replace the string concatentation with the template literal (or at least, that style guide says you should do that):

`:<br><br><pre style="color:red">${ softTab }${ err.stack.replace(/\n/g, `<br>${softTab}`) }</pre>'

---

That said, you might want not to use a ternary at all here:

function renderError(err) {
  const softTab = '    ';
  let message = 'Server Error';
  if (process.env.NODE_ENV !== 'production') {
    message += ':<br><br><pre style="color:red">';
    message += softTab + err.stack.replace(/\n/g, '<br>' + softTab);
    message += '</pre>';
  }
  return renderFullPage(message, {});
}

Or maybe, using CSS instead of <br> tags and "soft" tabs:

function renderError(err) {
  let message = 'Server Error';
  if (process.env.NODE_ENV !== 'production')
    message += `:<pre style="margin-top:2em;padding-left:3em;color:red;">${err.stack}</pre>`;
  return renderFullPage(message, {});
}

Answer 3

Here is the solution I came up with to suite airbrb style guide.

const renderError = err => {
  const softTab = '    ';
  const errTrace = process.env.NODE_ENV !== 'production' ?
    `:<br><br><pre style="color:red">${softTab}${err.stack.replace(/\n/g, `<br>${softTab}`)}</pre>` : '';
  return renderFullPage(`Server Error${errTrace}`, {});
};