原文： How to Work with Numbers and Dates in JavaScript

数字、日期和计时器是 JavaScript 的重要组成部分。你在写代码时需要知道如何处理它们。

我们经常忽略这些话题，因为很多文章都没有讨论它们。所以在这里，我们将深入探讨你可以使用的技术，学习一些有趣的东西，你可以在你的下一个项目中使用。

如何在 JS 中处理数字

数字是一个原始的包装对象，用于将数据类型转换为数字。首先，我们将看到如何使用 Number 包装对象将字符串转换为数字。

let str = "23";
console.log(typeof str); // string

let num = Number(str);
console.log(typeof num); // number

上面的例子显示了如何将一个字符串转换为一个数字。

还有一种方法，你可以使用类型强制法来实现。我们只需在字符串前加上 + 符号，就可以将字符串转换为数字。

let str = "23";
console.log(typeof str); // 字符串

// 重新分配字符串变量
str = +"23";
console.log(typeof str);  // 数字

所以从上面的例子我们可以看出，有两种方法可以将字符串转换成数字。但我们通常更喜欢 Number() 方法，因为它更清楚显示我们在做什么，也更精确。

如何使用 parseInt() 和 parseFloat()

我们有一个函数 parseInt()，可以只从字符串中解析出整数部分。但是字符串应该以整数开始。我们只能解析字符串中第一次出现的整数。让我们试着用一个例子来理解。

我们可以用 2 种不同的方式进行解析：

  • Number.parseInt()
  • parseInt()

第一种方法更好，因为它更精确。

let padding = "22px";
console.log(Number.parseInt(padding)); // 22

let margin = "16px 12px";
console.log(Number.parseInt(margin)); // 16

let body = "container 12px";
console.log(Number.parseInt(body)); // NaN

从上面的例子可以看出，你只能解析字符串中第一次出现的整数，而且字符串应该以数字开头。

你也可以用 parseFloat() 解析浮点数，规则相同。

let padding = "2.5rem";
console.log(Number.parseFloat(padding)); // 2.5

let margin = "1.5rem 2.5rem";
console.log(Number.parseFloat(margin)); // 1.5

let body = "container 1rem";
console.log(Number.parseFloat(body)); // NaN

这就是你从一个字符串中提取整数或浮点数的方法。那么我们可以在哪里使用它呢？如果你熟悉 HTML 和 CSS，你可以使用 parseInt() 在 JavaScript 的帮助下提取 HTML/CSS 中提到的文本大小。在提取了这些信息后，你可以对文本进行操作，并通过调整填充、边距等改变一个元素的大小。

如何使用 Math 对象

Math 是一个内置的对象，它有不同的方法和功能来帮助你进行数学计算。

请记住，Math 只对 Number 类型起作用。

Math 中有许多方法和函数，但在本教程中我们将只看到其中的几个。要探索更多，你可以访问这里的文档。

let num = 16;
console.log(Math.sqrt(num)); 
// 计算一共数字的平方根

let arr = ['1',4,7,20,32,35,41,'45'];
console.log(Math.max(...arr)); // 45
// ...arr 结构数组
// max 使用类型强制法将一个字符串转换为一个数字
// 并返回数组中最大的数字

console.log(Math.min(...arr)); // 1
// min 返回数组中最小的整数

有 4 种 math 方法，对初学者来说可能非常混乱。但在这里我们将尽可能地简化它们，以更好地理解它们。

有 4 种方法：

  • trunc()
  • floor()
  • round()
  • ceil()

Math.trunc()

这个方法只删除一个整数的小数部分。小数部分有多长并不重要。

let height = 23.4;
let width = 23.6;

console.log(Math.trunc(height)); // 23
console.log(Math.trunc(width)); // 23

Math.floor()

当我们对一个浮动数使用 floor 方法时，它会向下舍入到最近的整数。

let height = 23.4;
let width = 23.6;

console.log(Math.floor(height)); // 23
console.log(Math.floor(width)); // 23

Math.round()

Math.round() 将一个浮点数舍入到最接近的整数。如果浮点数（小数点后的数字）低于 5，它就向下舍入。如果浮点数高于 5，它就向上舍入。你可以在这里看到它是如何工作的。

let height = 23.4;
let width = 23.6;

console.log(Math.round(height)); // 23
console.log(Math.round(width)); // 24

Math.ceil()

Math.ceil() 将四舍五入到浮点的下一个整数。它与 Math.floor() 完全相反。

let height = 23.4;
let width = 23.6;

console.log(Math.ceil(height)); // 24
console.log(Math.ceil(width)); // 24

当我们在 JavaScript 中对浮点进行操作时，经常会遇到小数点精度的问题。我们来看看下面的例子。

let operation = 0.1 / 0.3;
console.log(operation); // 0.33333333333333337

我们在这里得到了很多反复出现的小数。我们可以对这些反复出现的小数进行操作，并使用 toFixed() 方法指定我们想要的小数的数量。

let operation = 0.1 / 0.3;
console.log(operation); // 0.33333333333333337
console.log(operation.toFixed(1)); // 0.3
console.log(operation.toFixed(2)); // 0.33

如何在 JS 中处理日期

在 JavaScript 中，日期是一个对象。我们可以在构造函数 new Date() 的帮助下计算出一个日期。现在，一个日期对象包含一个以毫秒为单位的数字（我们从 1970 年 1 月 1 日开始计算毫秒）。

let now = new Date();
console.log(now); // current date

console.log(new Date() / 1000); // 从 1970 年 1 月开始计算毫秒

主要有四种方法来创建一个日期：

// 1
let now = new Date();
console.log(now);

// 2
now = new Date("Aug 31 2022 11:45:45");
console.log(now);

// 3
now = new Date("Nov 14 2022");
console.log(now);

// 4
let birth = "01-05-1998";
console.log(new Date(birth)); // 05 Jan 1998
  • 当你处理当前日期并想在你的应用程序中动态地改变日期和时间时，你会想使用第一个方法。
  • 当你想处理由用户提供的日期或存储的过去日期时，你可以使用第二种方法。
  • 第三种方法是第二种方法的一个简单的替代方法，而且比较简单。
  • 如果你想把一个字符串转换为日期/时间格式，你可以使用第四种方法。

你可以使用这些方法中的任何一种。因为如果我们想提取有关该日期的任何信息，你有预定义的方法可以使用，而这些方法不能用于字符串。

当我们创建一个新的 Date() 时，有 7 个数字，依次是年、月、日、小时、分钟、秒和毫秒。

我们可以用很多方法来获得不同的信息。

  • getFullYear()
  • getMonth()
  • getDate()
  • getDay()
  • getHours()
  • getMinutes()
  • getSeconds()
  • getTime()
let now = new Date();

console.log(now.getFullYear()); // 显示年份
console.log(now.getMonth()); // 显示从 0 开始的月份
console.log(now.getDate()); // 显示日期
console.log(now.getDay()); //  显示星期几，其中星期一是 0，以此类推
console.log(now.getHours()); // 以 24 小时的形式显示小时数
console.log(now.getMinutes()); //  显示分钟
console.log(now.getSeconds()); // 显示秒
console.log(now.getTime()); // 显示从 1970 年 1 月 1 日到现在的时间，以毫秒为单位

如何对日期进行操作

我们可以对日期进行不同的操作。如果有两个日期，我们想找到这些日期之间的差异，可以执行减法。但当我们得到的结果是以时间戳的形式出现的，必须将其转换为天。

let present = new Date('Aug 31 2020');
let past = new Date('Aug 31 1990');
let days  = present - past;
console.log(days); //  时间戳
console.log(Math.abs(new Date(days)/(1000*60*60*24))); // 天数

如果你想对日期进行更精确的计算，你可以使用 moment.js ——但对于简单的项目和应用程序来说，可能没有必要。

总结

我希望你现在明白数字和日期在 JavaScript 中是如何工作的。谢谢你阅读本文！

你可以关注我的账号：