在模板文字中使用函数

Question

我一直想知道为什么以下代码不起作用。

const StyledComponent = styled.div`
  ${props => props.value === 'value' && function(parameter1)};
`

但是以下方法确实有效：

const StyledComponent = styled.div`
  ${props => props.value === 'value' ? function(parameter1) : function(parameter2)};
`

它看起来像是因为第一个将其视为布尔值，所以它不起作用。但是呢：

const StyledComponent = styled.div`
  ${props => props.value === 'value' && `color: red;`};
`