JavaScript 表达式无法理解

Question

我是 React 和 Js 的新手，我想了解这行代码(它是 JSX 内部的 Js):

<h5 className="recipes__title">
  {item.recipe.label < 20 ? `${item.recipe.label}` : `${item.recipe.label.substring(0, 25)}...` }
</h5>

有人知道如何阅读和理解它吗？

谢谢!

Answer 1

<h5 className="recipes__title">            //An html header
                                           //Containing... 
  {
    item.recipe.label < 20 ?               // If the item.recipe.label is less than 20 then...

`${item.recipe.label}`                     // the label
: `${item.recipe.label.substring(0, 25)}   //else the first 25 characters of the label followed by 
  ...`                                     // the string "..."     
}
</h5>

您可以了解三元运算符(这是有条件解析为两个表达式之一的表达式)here

您可以找到有关模板文字(可以包含要解析的 javascript 的字符串)here