Question

我知道有更优雅的方法来定义包含变量的字符串，但如果我想在ES6之前添加条件，我会这样做..

var a = "text"+(conditional?a:b)+" more text"

现在使用模板文字我会做..

   let a;
   if(conditional) a = `test${a} more text`;
   else a = `test${b} more text`;

有没有更优雅的方式来实现这个条件？是否可以包含快捷方式？

Answer 1

使用此：

let a = `test${conditional ? a : b} more text`;

Answer 2

您也可以进一步扩展它，并在这样的条件内使用占位符。

这实际上取决于您所具有的可读性最高的用例。

一些例子：

// example 1
const title = 'title 1';
const html1 = `${title ? `<h2>${title}</h2>` : '<h2>nothing 1</h2>'}`

document.getElementById('title-container-1').innerHTML = html1;

// example 2
const title2= 'title 2';
const html2 = `
	${title2 ? 
  	`<h2>${title2}</h2>` : 
  	"<h2>nothing 2</h2>"
  }`

document.getElementById('title-container-2').innerHTML = html2;

// example 3
const object = {
	title: 'title 3'
};

const html3 = `
	${(title => {
      if (title) {
        return `<h2>${title}</h2>`;
      }
	  	return '<h2>Nothing 3</h2>';
		})(object.title)
	  }
`;

document.getElementById('title-container-3').innerHTML = html3;

<div id="title-container-1"></div>
<div id="title-container-2"></div>
<div id="title-container-3"></div>

（source）

在模板文字中使用条件

2 个答案: