在 React & Vue 中 将矫正时间（UTC）转为本地时间的奇淫技巧！！！

看过看多前端开发者，转个时间还需要下载专业的包，其实，例如 ThinkSNS Plus 项目，后端时间固定为 UTC 的，有一个小技巧，转换本地时间爽歪歪！！！

还有那很多公共 API 基本都是 UTC 时间，包括 GitHub。

Vue 版

<template>
  <span> {{ date }} </span>
</template>

<script>
export default {

  props: {
    utc: {
      type: String, required: true
    }
  },

  computed: {

    date() {
      return (new Date(`${this.utc}Z`)).toLocaleString();
    }

  }

};
</script>

React 版本

import React from 'react';

export default ({ utc }) => (<span> {(new Date(`${utc}Z`).toLocaleString())} </span>)

浏览器测试版

let timeStr = '2017-9-1 00:00:00';
console.log(
    (new Date(timeStr + 'Z')).toLocaleString()
);

将上面代码复制到浏览器的 Console 粘贴 会车执行。

原理

例如使用 Laravel 拿到的时间是 2017-9-13 16:20:35 我们只要在最后加入 Z 字符串，就表示为「矫正时间」然后 Date 函数会自动处理时区问题的。

可以强化一下，结尾是 z 则不添加字符串。

当然，前提条件是你的程序类似 ThinkSNS Plus 一样统一使用 UTC。