我有一个简单的ajax请求返回一些数据,然后插入到模板文字中。我想知道是否可以在模板中插入"if"语句?
本质上是添加另一行代码,如果 json 对象具有第 5 种颜色。
$.ajax({
url: 'http://localhost:8888/ColourCatchr%202/app/search.php'
}).done(function(results){
var res = jQuery.parseJSON(results);
console.log(res);
$.each(res,function(index,result){
$('.palettes').append(`
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">${result.name}</h3>
</div>
<div class="panel-body">
<div class="col-md-12 colors">
<div class="color" style=background-color:#${result['color 1']}><h6>${result['color 1']}</h6></div>
<div class="color" style=background-color:#${result['color 2']}><h6>${result['color 2']}</h6></div>
<div class="color" style=background-color:#${result['color 3']}><h6>${result['color 3']}</h6></div>
<div class="color" style=background-color:#${result['color 4']}><h6>${result['color 4']}</h6></div>
${if(result['color 5']){
<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
}
}
<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
<p>on hover change to translucent background and black text for ecah color</p>
</div>
</div>
<div class="panel-footer">
<a class="btn btn-info btn-lg" href="update.html?id=${result.id}">Edit</a>
<a class="btn btn-danger btn-lg">Delete</a>
</div>
</div>`
)
})
})
您需要将逻辑移动到函数中或使用三元运算符:
`${result['color 5'] ? 'color 5 exists!' : 'color 5 does not exist!'}`
基于注释的其他示例:
`${result['color 5'] ?
`<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>`
: ''}`
来自 MDN 关于模板字符串的文章:
模板文本是允许嵌入表达式的字符串文本。
因此,您也可以使用 IIFE(立即调用的函数表达式(。例如:(() => { ... })()
。
不过,我认为,如果您需要比模板字符串中的三元表达式更复杂的逻辑,您应该考虑重构您的代码。但是,由于其他答案尚未提出这一点,因此这里有一种使用 IIFE 的方法。这在三元表达式就足够的情况下很有用,但您更喜欢以专横的形式阅读分支逻辑;或者在嵌入其他多行模板字符串的情况下。
让我为您编一个例子:
/* Note: I'm using a tagged template literal for HTML templates here,
* similar to the one provided by www.npmjs.com/package/lit-html.
*/
html`
<div class="example">
${(() => {
if (result['color 5']) {
return html`
<div class="color-preview" style="background-color: ${result['color 5']}"></div>
<span> Here's your color #5 </span>
`
} else {
return html`<div>You don't have a 5th color</div>`
}
})()}
</div>
`
由于函数体可以包含的不仅仅是表达式,因此此技术允许您在模板字符串"内"使用任何 JavaScript 语法。
模板文本中使用 nullish 合并运算符。
`${result['color 5'] ?? `Color 5 exists`}`
更好的方法是为函数创建默认参数。
const renderHello = (name = "new member") => `Hello ${name}`;
console.log(1, renderHello());
console.log(2, renderHello("James"));
// 1 Hello new member
// 2 Hello James
如果条件false
,有时您可能不想渲染任何内容,例如您在问题中的状态。因此,您可以执行以下操作:
(注意:当嵌套的模板文本位于${}
内时,也可以将模板文本相互嵌套(
const html = `
<div>
<div>
Lots of HTML stuff
</div>
<div>
${result['color 5'] && `
<div class="color" style=background-color:#${result['color 5']}><h6>${result['color 5']}</h6></div>
`}
</div>
`;
这是因为,与其他语言不同,在Javascript中,逻辑运算符(&&
和||
(不一定(必然(返回true
或false
。
逻辑 AND 运算符 ( &&
(:
Javascript 返回第一个 falsy 变量,如果未找到,则返回最后一个 truthy 变量。
逻辑 OR 运算符 ( ||
(
Javascript 返回第一个真变量,如果未找到,则返回最后一个假变量。
您可以在此处看到此操作:
console.log(true && true) // true
console.log(false && true) // false
console.log("a" && "b"); // b
console.log(false && "b"); // false
console.log(0 && "b"); // 0
console.log("a" && NaN); // NaN
这在 JSX 中非常常用。
若要在使用三元运算符时使用变量,请使用如下所示的嵌套模板文本:
let var1 = 6
let var2 = 8
console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)
const heading = 'head';
const location = 'erode';
const district = 'erode';
const isSameLocationDistrict = (location === district) || false;
const storeSlug = `${heading} ${isSameLocationDistrict === true ? location : `${location } ${district}`}`;
console.log(storeSlug);
// "head erode"
// "head erode1 erode"