Question

我在airbnb风格指南的开发中使用了eslint。我得到了eslint错误建议使用模板文字而不是字符串连接（prefer-template）。

它标记此行有错误

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

这是我的代码

const renderError = err => {
  const softTab = '&#32;&#32;&#32;&#32;';
  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}`, {});
};

我的问题是使用三元运算符应用模板文字的推荐方法是什么？我在函数返回时应用了它，但是根据我在这行上应用模板文字的位置会导致错误。理想情况下，我尝试了整行，但是我试图将${softTab}传递给err.stack.replace(/\n/g, ' ' + softTab)时出现问题，任何建议或解决方案都会很棒。谢谢！

Answer 1

在ES6中，您可以使用模板文字而不是字符串连接。要执行此操作，请使用反向标记（`）（重音符号）字符而不是双引号或单引号。模板文字可以包含占位符。这些由美元符号和花括号（$ {expression}）表示。所以你的情况：

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

进一步阅读： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

Answer 2

这与三元运算符并没有多大关系。你应该用template literal替换字符串连接（或者至少，那个样式指南说你应该这样做）：

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

那就是说，你可能根本不想在这里使用三元组：

function renderError(err) {
  const softTab = '&#32;&#32;&#32;&#32;';
  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, {});
}

或许，使用CSS而不是 标签和＆＃34; soft＆＃34;标签：

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

这是我提出的解决airbrb风格指南的解决方案。

const renderError = err => {
  const softTab = '&#32;&#32;&#32;&#32;';
  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}`, {});
};

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

3 个答案: