javascript - bootstrap.js 工具提示插件中使用的奇怪语法以及计算工具提示位置

Question

placement = placement == 'bottom' && pos.top   + pos.height  + actualHeight - docScroll > parentHeight  ? 'top'    :
            placement == 'top'    && pos.top   - docScroll   - actualHeight < 0                         ? 'bottom' :
            placement == 'right'  && pos.right + actualWidth > parentWidth                              ? 'left'   :
            placement == 'left'   && pos.left  - actualWidth < parentLeft                               ? 'right'  :
            placement

这是 bootstrap.js 工具提示插件中的代码。全文可查here 。

为什么每行以“:”结尾，而不是“;”？ 你能帮我解释一下语法吗？我也不懂算术。如果您知道这种计算技术，如果工具提示应该出现在元素的左侧、右侧、顶部或底部，请帮助我理解它。谢谢!

Answer 1

JavaScript 有条件运算符 ?: (也称为三元运算符)。您可以阅读它的描述here 。一般语法为

condition ? expr1 : expr2

它评估条件，然后评估expr1(如果条件为true)或expr2> 如果条件为假。整个表达式的值是 expr1 或 expr2 中被计算的值。

在您发布的代码中，有多个条件运算符的嵌套使用。这是一个两级嵌套:

a ? x : b ? y : z

由于优先级规则，它的计算方式就好像它是这样写的:

a ? x : (b ? y : z)

为了清楚起见，通常不使用括号，并且引入换行符和空格，以便每个条件运算符的各个部分都垂直排列。例如:

r = a ? x :
    b ? y :
    z;

这种情况可以在任意数量的条件下持续。