时间戳

首页 > 解决方案 > javascript - 简化：如果 Var 为空，则为“”，否则将 Var 用文本括起来

javascript - javascript - 简化：如果 Var 为空，则为“”，否则将 Var 用文本括起来

问题描述

我正在写es模板。我想让代码尽可能简单，最好避免使用 (function(){return XXX})()

上下文：当列表没有任何内容时，不打印任何内容，否则打印带有 ul 标签的列表。

${
  // same filter 2 times
  arr.filter( d=>d.prop1=="a" ).length==0
    ? ""
    : `<ul> ${ arr.filter( d=>d.prop1=="a" ).map(d=>`<li>${d.text}</li>`) } </ul>`
}

或者

${
  // function makes it bulky
  (function(){
    let arr2 = arr.filter( d=>d.prop1=="a" );
    if( arr2.length == 0 ){
      return ""
    }else{
      return `<ul> ${ arr2.map(d=>`<li>${d.text}</li>`) } </ul>`
    }
  })()
}

还有一个上下文，有时问题是这样的：

 const NAMES = [
   { name:"John" },
   { name:"Michael", nickname:"Mike" },
 ];

 NAMES.map( n=>`name: ${n.name} ${ n.nickname? "("+n.nickname+")":"" }` ).join("\n")
 // can simplify n.nickname? "("+n.nickname+")":"" ?

有人想出一种方法来简化这些吗？谢谢。

标签： javascripttemplate-literals

解决方案

使用array.some比检查过滤数组的长度要快一点。

${
    ARR.some(o => !!o.attr) 
    ? `<ul>${ARR.filter(o => !!o.attr).map(o => (`<li>${o.attr}</li>`))}</ul>` 
    : ""
}

此外，由于大多数模板不打印false值，您可以使用&&.

${ ARR.some(o => !!o.attr) && `<ul>${ARR.filter(o => !!o.attr).map(o => (`<li>${o.attr}</li>`))}</ul>` }

如果您不想保持重复的条件，则必须使用变量，所以除了使用函数之外，我不知道有什么其他方法。使用上面的技巧，您可以稍微减小函数大小。

${
    ((arr) => {
        arr = arr.filter(o => !!o.attr);
        return !!arr.length && `<ul>${arr.map(o => (`<li>${o.attr}</li>`))}</ul>`;
    })(ARR)
}

对于NAMES，您可以只使用背杆。

NAMES.map(o => (`Name: ${o.name}${o.nickname ? ` (${o.nickname})` : ""}`))

推荐阅读