Manière la plus courte d'imprimer l'année en cours dans un site Web

J'ai besoin de mettre à jour quelques centaines de pages HTML statiques dont la date de copyright est codée en dur dans le pied de page. Je veux le remplacer par du JavaScript qui sera mis à jour automatiquement chaque année.

Actuellement j'utilise:

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

Est-ce aussi court que possible?

Voici le plus court possible:

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

Cela fonctionnera dans tous les navigateurs que j'ai rencontrés.

Comment j'y suis arrivé:

• Vous pouvez simplement appeler getFullYeardirectement sur la nouvelle création Date, pas besoin de variable. new Date().getFullYear()peut sembler un peu étrange, mais c'est fiable: la new Date()pièce est faite en premier, puis.getFullYear() .
• Vous pouvez supprimer le type, car JavaScript est la valeur par défaut; cela est même documenté dans le cadre de la spécification HTML5 , qui dans ce cas est probablement en train d'écrire ce que les navigateurs font déjà.
• Vous pouvez supprimer le point-virgule à la fin pour un caractère supplémentaire enregistré, car JavaScript a une "insertion automatique de point-virgule", une fonctionnalité que je méprise et contre laquelle je me moque normalement , mais dans ce cas d'utilisation spécifique, il devrait être suffisamment sûr.

Il est important de noter que cela ne fonctionne que sur les navigateurs où JavaScript est activé. Idéalement, cela serait mieux géré comme un travail par lots hors ligne ( sedscript sur * nix, etc.) une fois par an, mais si vous voulez la solution JavaScript, je pense que c'est aussi court que possible. (Maintenant, je suis allé et tenté le destin.)

La réponse de TJ est excellente mais je suis tombé sur un scénario où mon HTML était déjà rendu et le script document.write écraserait tout le contenu de la page avec seulement l'année de la date.

Pour ce scénario, vous pouvez ajouter un nœud de texte à l'élément existant à l'aide du code suivant:

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

Si vous souhaitez inclure un laps de temps à l'avenir, avec l'année en cours (par exemple 2017) comme année de début afin que l'année prochaine, elle apparaisse comme ceci: «© 2017-2018, Company.», Puis utilisez le code suivant . Il sera automatiquement mis à jour chaque année:

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

© Copyright 2017-2018, Société.

Mais si la première année s'est déjà écoulée, le code le plus court peut être écrit comme ceci:

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

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

La solution JS fonctionne très bien mais je conseillerais une solution côté serveur. Certains des sites que j'ai consultés avaient ce problème de la page entière vide et seulement l'année étant vue de temps en temps.

La raison en est que document.write a en fait écrit sur tout le document.

J'ai demandé à mon ami d'implémenter une solution côté serveur et cela a fonctionné pour lui. Le code simple en php

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

Prendre plaisir!

Voici la version la plus courte et la plus responsable ultime qui fonctionne même à la fois AD et BC.

[rouleaux de tambour ...]

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

C'est tout. 6 octets de moins que la réponse acceptée.

Si vous devez être compatible ES5, vous pouvez vous contenter de:

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

C'est la meilleure solution à laquelle je puisse penser qui fonctionnera avec du JavaScript pur. Vous pourrez également styliser l'élément car il peut être ciblé en CSS. Ajoutez simplement à la place de l'année et il sera automatiquement mis à jour.

//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();
        }
    })();
});

Pour React.js, voici ce qui a fonctionné pour moi dans le pied de page ...

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

selon l'audit chrome

Pour les utilisateurs sur des connexions lentes, les scripts externes injectés dynamiquement via document.write()peuvent retarder le chargement de la page de plusieurs dizaines de secondes.

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

donc une solution sans erreur est:

(new Date).getFullYear();