Vue中如何将timestamp时间戳显示为指定的ZULU时区时间

实现方案 #

这个需求完全可以实现。你现有代码的问题是调用了getFullYear()、getHours()等本地时区相关的Date方法，实际输出的是用户设备当前所在时区的时间，仅手动拼接了ZULU后缀，不符合要求。

ZULU时区等价于UTC+0标准时区，本身不存在夏令时调整，你只需要将代码中所有本地时间取值方法替换为UTC对应的方法即可。同时顺便修正了你原代码中data直接写对象的错误——Vue组件的data必须是返回对象的函数，否则多个组件实例会共享同一份数据导致异常，修改后的完整代码如下：

<script>
import Logger from './Logger'

export default {
  name: 'Navbar',
  components: {
    Logger
  },
  data() {
    return {
      timestamp: ""
    }
  },
  created() {
    // 先调用一次避免页面加载后首秒空值
    this.getNow()
    setInterval(this.getNow, 1000);
  },
  methods: {
    // 补零工具函数，避免出现 2024-1-2 9:3:5 这类格式不统一问题
    padZero(num) {
      return num.toString().padStart(2, '0')
    },
    getNow: function() {
      const today = new Date();
      // 全部替换为UTC时区取值方法
      const date = today.getUTCFullYear()+'-'+this.padZero(today.getUTCMonth()+1)+'-'+this.padZero(today.getUTCDate());
      const time = this.padZero(today.getUTCHours()) + ":" + this.padZero(today.getUTCMinutes()) + ":" + this.padZero(today.getUTCSeconds()) + " - " + "ZULU";
      const dateTime = date +' '+ time;
      this.timestamp = dateTime;
    }
  }
}
</script>

如果后续你需要其他固定时区的时间展示，也可以使用toLocaleString方法的timeZone参数直接指定时区，不需要自己手动计算时差。

内容的提问来源于stack exchange，提问作者Woop