在网站上打印当前年份的最短方法

Posted 2023-02-24

【中文标题】在网站上打印当前年份的最短方法

【英文标题】：Shortest way to print current year in a website

【发布时间】：2011-06-01 13:06:42

【问题描述】：

我需要更新数百个在页脚中硬编码版权日期的静态 html 页面。我想用一些每年自动更新的 javascript 替换它。

目前我正在使用：

<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>

这是尽可能短的吗？

【参考方案1】：

几年后，当我做其他事情时，我被提醒Date()（没有new）返回一个字符串，并且一个字符比我原来的下面的字符短：

<script>document.write(/\d4/.exec(Date())[0])</script>

Date() 字符串中的第一个四位数字序列是specified to be the year。 （当我在下面发布我的原始答案时，这不是指定的行为——尽管它很常见。）

当然，此解决方案仅在另外 7,979 年内有效（截至 2021 年撰写本文时），因为从 10000 年开始，它将显示“1000”而不是“10000”。

---

您要求提供 JavaScript 解决方案，所以这是我能得到的最短的解决方案：

<script>document.write(new Date().getFullYear())</script>

这适用于我遇到的所有浏览器。

我是如何到达那里的：

你可以直接在新创建的Date上调用getFullYear，不需要变量。 new Date().getFullYear() 可能看起来有点奇怪，但它是可靠的：new Date() 部分首先完成，然后是 .getFullYear()。 你可以放弃type，因为JavaScript是默认的；这甚至被记录为HTML5 specification 的一部分，在这种情况下，这很可能是在记录浏览器已经在做的事情。 您可以在末尾删除分号以额外保存一个字符，因为 JavaScript 具有“自动分号插入”功能，我通常鄙视并反对这一功能，但在这个特定用例中它应该足够安全。

请务必注意，这仅适用于启用 JavaScript 的浏览器。理想情况下，最好将其作为离线批处理作业（*nix 上的sed 脚本等）处理一次，但如果您想要 JavaScript 解决方案，我认为它会尽可能短。 （现在我已经去试探命运了。）

---

但是，除非您使用的服务器只能提供静态文件，否​​则您最好在带有模板引擎的服务器上执行此操作并使用缓存标头以允许缓存结果页面，直到需要更改日期。这样，您就不需要客户端上的 JavaScript。在内容中使用非defer/async script 标记也会短暂地延迟页面的解析和呈现（正是因为这个原因：因为脚本中的代码可能使用document.write 来输出HTML）。

【讨论】：

@SystemsRebooter - 在初始解析阶段，您只能将 document.write 用于内联内容（如上所示，在 <script>...</script> 标记中 - 或在加载了 @ 的 .js 文件中987654342@ 标签没有 defer 或async）。当页面被完全解析时，文档流被关闭，并使用document.write 重新打开它——用一个新的完全替换文档。如果要在主解析完成后添加一年，则要使用 DOM。 （这不是变化，一直都是这样。）

请注意，在 2020 年，答案实际上是“使用具有 CLI 处理器的模板引擎并在文件中放置模板标签”。 Document.write 在 10 年前仍然有意义，现在最好留给历史载入史册。

@Mike'Pomax'Kamermans - 我认为这可能是 10 年前问题标题的最佳答案。 ;-) 我想我曾经对这个问题发表过评论，但 cmets 是短暂的（我可能是错的）。问题的主体特别要求 JavaScript，但我应该（并且现在已经）说出你在答案中所说的内容。谢谢！

【参考方案2】：

<script type="text/javascript">document.write(new Date().getFullYear());</script>

【讨论】：

我知道只是

【参考方案3】：

如果您想在未来包含一个时间范围，将当前年份（例如 2017 年）作为开始年份，以便明年显示如下：“© 2017-2018, Company.”，然后使用以下代码。每年都会自动更新：

&copy; Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.

© 版权所有 2017-2018，公司。

但是如果第一年已经过去了，最短的代码可以这样写：

&copy; Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.

【参考方案4】：

JS 解决方案效果很好，但我建议使用服务器端解决方案。我检查的一些网站存在整个页面空白的问题，并且偶尔会看到一年。

原因是 document.write 实际上覆盖了整个文档。

我让我的朋友实现了一个服务器端解决方案，它对他很有效。 php中的简单代码

<?php echo date('Y'); ?>

享受吧！

【讨论】：

你的解决方案很简单，但问题是与JavaScript有关

哈哈！当我发布这个时，解决方案已经给出。不过我还是想让人们知道还有其他方法！希望它对将来像我这样的人有所帮助！

我同意你的观点，当没有相同想法的解决方案时，我们需要寻找替代方案。小心投反对票?

如果服务器端解决方案是 Node.js 和 JavaScript 呢？

如果页面变为空白，这意味着在 DOM 加载后使用了document.write。解决方案是在所有 DOM 加载后不使用document.write，或者，更好的是，根本不使用document.write。

【参考方案5】：

TJ 的回答非常好，但我遇到了一种情况，即我的 HTML 已经呈现，并且 document.write 脚本会用日期年份覆盖所有页面内容。

对于这种情况，您可以使用以下代码将文本节点附加到现有元素：

<div>
    &copy;
    <span id="copyright">
        <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
    </span>
    Company Name
</div>

【讨论】：

是的 - 一个很好的解决方案！我建议将脚本 sn-p 移动到结束 body 标记之前或 html 正文末尾的其他 js。

createTextNode() 不会像<br> 那样解释html 你如何用HTML 创建一个节点？

【参考方案6】：

这是甚至适用于 AD 和 BC 的最终最短且最负责任的版本。

[鼓声...]

<script>document.write(Date().split` `[3])</script>

就是这样。比接受的答案短 6 个字节。

如果你需要兼容 ES5，你可以满足：

<script>document.write(Date().split(' ')[3])</script>

【讨论】：

如果您的用户及时回到公元 1000 年之前呢？或者如果用户使用您的应用 > 9999 AD 怎么办？ #responsibleCode #NotAnotherY2K ;)

@NickSteele 希望那时我们还没有编写纯 JavaScript。

【参考方案7】：

这是我能想到的最好的解决方案，它适用于纯 JavaScript。您还可以设置元素样式，因为它可以在 CSS 中定位。只需添加年份，它就会自动更新。

//Wait for everything to load first
window.addEventListener('load', () => 
    //Wrap code in IIFE 
    (function() 
        //If your page has an element with ID of auto-year-update the element will be populated with the current year.
        var date = new Date();
        if (document.querySelector("#auto-year-update") !== null) 
            document.querySelector("#auto-year-update").innerText = date.getFullYear();
        
    )();
);

【参考方案8】：

<div>&copy;<script>document.write(new Date().getFullYear());</script>, Company.
</div>

【参考方案9】：

对于 React.js，以下是页脚中对我有用的内容...

render() 
    const yearNow = new Date().getFullYear();
    return (
    <div className="copyright">&copy; Company 2015-yearNow</div>
);

【参考方案10】：

根据chrome审核

对于连接速度较慢的用户，动态注入外部脚本 via document.write() 可以延迟几十秒的页面加载。

https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools

所以没有错误的解决方案是：

(new Date).getFullYear();

【参考方案11】：

上述专家提供了许多解决此问题的方法。下面的解决方案可以使用not block页面rendering或not even re-trigger它。

在纯 Javascript 中：

window.addEventListener('load', (
    function () 
        document.getElementById('copyright-year').appendChild(
            document.createTextNode(
                new Date().getFullYear()
            )
        );
    
));

<div> © <span id="copyright-year"></span></div>

在 jQuery 中：

$(document).ready(function() 
  document.getElementById('copyright-year').appendChild(
    document.createTextNode(
      new Date().getFullYear()
    )
  );
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> &copy; <span id="copyright-year"></span></div>

【参考方案12】：

接受的答案并不总是有效

最近的一次更新导致我所有的 WordPress 页脚版权日期都被推到页面的末尾，而不是像以前那样内联写入。我确信在其他情况下也可能发生这种情况，但这只是我注意到的地方。

如果发生这种情况，您可以通过创建一个空的 span 标签并将日期注入其中来修复它，如下所示：

<span id="cdate"></span><script>document.getElementById("cdate").innerHTML = (new Date().getFullYear());</script> 

或者如果你在你的网站上启用了 jquery，你可以像这样简单一点：

<span id="cdate"></span><script>$("#cdate").html(new Date().getFullYear());</script> 

这类似于 Adam Milecki 的回答，但要短得多

【参考方案13】：

使用document.write 不是一个好习惯。您可以按here 了解有关 document.write 的更多信息。这是一个有点友好的 JavaScript 解决方案。是的，有一些关于 InnerHTML 不好的研究，正在研究更友好的解决方案。

document.getElementById("year").innerHTML = (new Date().getFullYear());

↑ JavaScript

↓ HTML

<p>Company &copy; <span id="year"></span> All Rights Reserved.</p>

这是一个JSFiddle 来测试它。我个人建议不要使用 JavaScript，而是使用 PHP 编写当前年份，使用 PHP 而不是 JavaScript 更安全。

<?php echo date("Y"); ?>

【参考方案14】：

如果您在网站上多次需要当前年份，您可以这样做：

document.querySelectorAll("copy-year").forEach(el => 
    el.textContent = `$el.textContent - $new Date().getFullYear()`;
);

Copyright Company <copy-year>1234</copy-year> ©

我知道，这不是最短的方法，但效果很好。

PS：你需要在页面底部有 JS 或者在 script 标签上使用 defer 属性。

【参考方案15】：

全年：

document.getElementById("getyear").innerHTML = (new Date().getFullYear());

<span id="getyear"></span>

【参考方案16】：

对于 React.js， 我们可以在一行中使用-

    return 
    <div className="copyright">Company 2015-new Date().getFullYear()</div>