有人能解释一下 John Resig 的 pretty.js JavaScript 是如何工作的吗？

Question

http://ejohn.org/files/pretty.js

// Takes an ISO time and returns a string representing how
// long ago the date represents.
function prettyDate(time){
    var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
        diff = (((new Date()).getTime() - date.getTime()) / 1000),
        day_diff = Math.floor(diff / 86400);

    if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
        return;

    return day_diff == 0 && (
            diff < 60 && "just now" ||
            diff < 120 && "1 minute ago" ||
            diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
            diff < 7200 && "1 hour ago" ||
            diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
        day_diff == 1 && "Yesterday" ||
        day_diff < 7 && day_diff + " days ago" ||
        day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

// If jQuery is included in the page, adds a jQuery plugin to handle it as well
if ( typeof jQuery != "undefined" )
    jQuery.fn.prettyDate = function(){
        return this.each(function(){
            var date = prettyDate(this.title);
            if ( date )
                jQuery(this).text( date );
        });
    };

prettyDate() 方法究竟是如何返回字符串的？这是你可以在 JavaScript 中做的另一件“奇怪”的事情，还是我只是错过了什么？

编辑：我没有问他如何返回一个值，我问他如何返回一个字符串。

return day_diff == 0 && (....) 以我用过的任何语言返回布尔值。

Answer 1

在 JavaScript 中：

• a || b 等价于a ? a : b
• a && b 等价于 a ? b : a
• 布尔表达式中的任何非空字符串的计算结果为真

有了这些知识，return 语句的逻辑就变得相当简单了。

假设，例如，day_diff = 5

然后一步一步地从上面的语句中获取：

return day_diff == 0 && (
       diff < 60 && "just now" ||
       diff < 120 && "1 minute ago" ||
       diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
       diff < 7200 && "1 hour ago" ||
       diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
   day_diff == 1 && "Yesterday" ||
   day_diff < 7 && day_diff + " days ago" ||
   day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";

首先，day_diff == 0 将评估为 false 和右侧：

(diff < 60 && "just now" ||
 diff < 120 && "1 minute ago" ||
 diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
 diff < 7200 && "1 hour ago" ||
 diff < 86400 && Math.floor( diff / 3600 ) + " hours ago")

...未评估。双方：

day_diff == 1 && "Yesterday"

...评估为false。接下来是：

day_diff < 7 && day_diff + " days ago"

在此表达式中，day_diff < 7 的计算结果为 true，因此其右侧是一个字符串，将被计算并返回其结果。

进一步阅读：

http://www.ejball.com/EdAtWork/2005/02/19/JavaScriptBooleanOperators.aspx

Answer 2

它在那里说：return ...，然后进入一个基本上是“内联ifs”的长嵌套列表。 ;-)

在 Javascript 中，布尔运算符返回操作数之一的 值，而不仅仅是 true 或 false。例如。 0 || 'foo' 返回'foo'。此特性与操作员短路结合使用。 false && true 不会计算 true 端并立即返回 false，因为整个表达式必须是 false。

Answer 3

您是 Java 人吗？因为如果是这样，您可能认为if(x) 需要 x 是一个布尔值，而“x && y”返回一个布尔值。它不在 JavaScript 和许多其他语言（如 Perl）中。在许多弱类型语言中，&& 被称为守卫运算符，||称为默认运算符。他们返回两个参数之一。

Answer 4

return 语句只是一个复杂的 if/else 级联，最终在所有非错误情况下返回一个字符串。

例如

return day_diff == 0 && (
        diff < 60 && "just now" ||
        diff < 120 && "1 minute ago" || [...]

如果 day_diff 为零（意味着日期是今天），则它会检查它是否小于 60。如果该语句为真，那么它将短路评估整个事情的其余部分，并且返回表达式的值，即“刚刚”。如果 diff 不小于 60，它将使子表达式短路，并继续进行diff < 120 检查，依此类推。

字符串在表达式中始终为“真”，并且当这种情况匹配时，它们也成为评估表达式的结果。

这是功能性但相当模糊的代码。不用于教学目的。 :)

Answer 5

是的，这是奇怪的 Javascript 东西。字符串连接的计算结果为 true，prettyDate() 底部的 return 语句在条件句中利用了这一点加上 short-circuiting。

所以基本上，在第一种情况下，如果diff 确实小于 60，diff < 60 && "just now" 的计算结果为字符串“just now”，因为条件中的所有其他顶级项目都是 OR'd 在一起的，因此 Javascript一旦第一个条件成立，评估者就不会关心它们。下线也是如此。

Answer 6

该行的最后一条语句的格式为

return boolExpression && otherBoolExpression

当 javascript 读取此内容时，会发生以下情况：

1. 如果boolExpression为假，则返回boolExpression
2. 否则返回otherBoolExpression。

这是 JavaScript 执行短路逻辑的方式。

由于在这种情况下，otherBoolExpression 使用字符串连接，所以函数返回字符串，只要dayDiff 不为 0。

Answer 7

基本上你只需要知道这一点

return day_diff == 0 && "lala" + "lolo"

如果day_diff == 0...由于运算符优先级，将返回lalalolo。

所以这只是一种更短的书写方式

if (day_diff == 0) {
   if (diff < 60) {
      return "just now"
   } else (...)
} else {
   if (day_diff == 1) {
     return "..."
   }
}

Answer 8

它正在玩依赖运算符优先级来处理条件的危险游戏：

+ 胜过 &&，后者胜过 ||

见：https://developer.mozilla.org/en/JavaScript/Reference/Operators/Operator_Precedence

我是这样读的：

(day_diff == 0 && (
            (diff < 60 && "just now") ||
            (diff < 120 && "1 minute ago") ||
            (diff < 3600 && Math.floor( diff / 60 ) + " minutes ago") ||
            (diff < 7200 && "1 hour ago") ||
            (diff < 86400 && Math.floor( diff / 3600 ) + " hours ago")
        )) ||
        (day_diff == 1 && "Yesterday") ||
        (day_diff < 7 && day_diff + " days ago") ||
        (day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago");

Answer 9

有两个变量：diff - 以秒为单位的差异，daydiff - 以天为单位的差异。 如果 daydiff 为零，则返回值基于 diff，否则为天数。

将“return”读取为一系列决定返回字符串的“if”/“else”子句。

Answer 10

prettyDate() 函数的返回值取决于后面评估中用到的两个变量day_diff 和diff

return day_diff == 0 && (
       diff < 60 && "just now" ||
       diff < 120 && "1 minute ago" ||
       diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
       diff < 7200 && "1 hour ago" ||
       diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
   day_diff == 1 && "Yesterday" ||
   day_diff < 7 && day_diff + " days ago" ||
   day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";

该评估可以更典型地编写为嵌套 if/else 语句，但如果 time 参数是超过 31 天之前的日期，则不会返回任何字符串。

if (day_diff == 0) {
  if (diff <60) 
    return "just now";
  else if (diff < 120)  
    return "1 minute ago";
  else if (diff < 3600)  
    return Math.floor( diff / 60 ) + " minutes ago";
  else if (diff < 7200)  
    return "1 hour ago";
  else if (diff < 86400) 
    return Math.floor( diff / 3600 ) + " hours ago";
}
else if (day_diff == 1)
    return "Yesterday";
else if (day_diff < 7)
    return day_diff + " days ago";
else if (day_diff < 31)
  return Math.ceil( day_diff / 7 ) + " weeks ago"

（并用模板文字稍微更新，强调返回的字符串 cis）

if (day_diff == 0) {
  if (diff <60)   return "just now";
  else if (diff < 120)  return "1 minute ago";
  else if (diff < 3600)  return `${Math.floor( diff / 60 )} minutes ago`;
  else if (diff < 7200)  return "1 hour ago";
  else if (diff < 86400)  return `${Math.floor( diff / 3600 )} hours ago`;
}
else if (day_diff == 1)  return "Yesterday";
else if (day_diff < 7)  return `${day_diff} days ago`;
else if (day_diff < 31) return `${Math.ceil( day_diff / 7 )} weeks ago`;