Question

我有一个简单的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>`
    )
})

})

Answer 1

您需要将逻辑移动到函数中或使用三元运算符：

AWSS3TransferManager * transferManager = [AWSS3TransferManager defaultS3TransferManager];
[[transferManager upload:_uploadRequest] continueWithExecutor:[AWSExecutor mainThreadExecutor] withBlock:^id(AWSTask * task) {


    return nil;
}];

基于评论的附加示例：

{
    "Version": "2012-10-17",
    "Id": "Policy14...5",
    "Statement": [
        {
            "Sid": "Stmt14.....5",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::myBucket/UsersUploads"
        }
    ]
}

Answer 2

你也可以这样做

`${result['color 5'] && `Color 5 exists`}`

Answer 3

要在使用ternary operator时使用变量，请像这样使用nested template litral：

let var1 = 6
let var2 = 8

console.log(`${ `${var1 > var2 ? var1 + ` (var1) `: var2 + ` (var2) `}` } is greater`)

Answer 4

摘自MDN关于模板字符串的文章：

模板文字是允许嵌入表达式的字符串文字。

我认为，如果您需要比模板字符串中的三元表达式更复杂的逻辑，则应考虑重构代码。但是，由于此处没有其他答案提出此问题，因此您也可以使用IIFE（立即调用的功能 expression ）。即使在三元表达式仍然足以满足您的需要的情况下，这也很有用，仅是为了使您的分支逻辑清楚，尤其是在您嵌入其他多行模板字符串的情况下。

让我为您提供一个示例：

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语法

Answer 5

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"

在ES6模板文字中插入if语句

5 个答案: