现代JavaScript中的条件级联

Question

我在寻找一种有条件地连接字符串的简洁方法。

请参见：

const something = response.data
  .map(i => {
    const id = i.Attachments?.[0]?.Id
    return { image: id ? "/servlet/servlet.FileDownload?file=" + id : undefined, ...i }
  })

我很想把这个插进去，但找不到办法。使用像('something' + foo) ?? undefined这样的零coelescing op永远不会被解析为未定义。

编辑:如果没有Id，我想将其最小化为.map(i => ({image: "/servlet/servlet.FileDownload?file=" + i.Attachments?.[0]?.Id, ...i}))，但image是空的。我希望在某个地方有个巧妙的技巧。

Answer 1

当今大多数编程语言的一个痛点是无法(或很难)表达条件字符串格式操作(我想知道这是否是一个逐个语言的阴谋-设计者不鼓励我们使用字符串，毕竟，字符串是昂贵的，没有GC就可以管理一个皮塔)。但由于这是JavaScript，总有一个核选择:扩展String.prototype

String.prototype.p = a => this ? (a+this) : undefined;

这意味着您的代码可以保留其原始形式，但可以转换为：

const something = response.data
  .map(i => {
    return { image: (i.Attachments?.[0]?.Id||'').p("/servlet/servlet.FileDownload?file="), ...i }
  })

然后又缩短为：

const something = response.data
  .map(i => ({image: (i.Attachments?.[0]?.Id||'').p("/servlet/servlet.FileDownload?file="), ...i }))

更新:现在我已经睡过了，下面是生活版：

const something = response.data
  .map(i => ({image: (s=>s?("/servlet/servlet.FileDownload?file="+s):undefined)(i.Attachments?.[0]?.Id), ...i }))

再次收缩以求好运：

const something = response.data.map(i=>({image:(s=>s?("/servlet/servlet.FileDownload?file="+s):void 0)(i.Attachments?.[0]?.Id),...i}))

总共135个字符。

Answer 2

我想我看到你在找什么了。您希望能够在不将表达式样式箭头函数转换为语句样式箭头函数的情况下内联重用复杂表达式。在这些情况下，可以使用表达式赋值。

const answer = (x=complex_expression?.[0]?.Id, x && "long/string.With/stuff"+x);

下面是一个使用该方法的示例：

const something = response.data.map(i => ({
  image: (id=i.Attachments?.[0]?.Id, id && "/servlet/servlet.FileDownload?file=" + id),
  ...i,
}));

如果不希望图像键是null，则可以这样做：

const something = response.data.map(i => ({
  ...(id=i.Attachments?.[0]?.Id, id && { image: "/servlet/servlet.FileDownload?file=" + id}),
  ...i,
}));

Answer 3

这就是你要找的吗？

const something = response.data
  .map(i => ({ 
     image: i.Attachments?.[0]?.Id && "/servlet/servlet.FileDownload?file=" + i.Attachments?.[0]?.Id,          
     ...i 
     })
  );