迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > JavaScript >

JavaScript 中的前导零

作者:迹忆客 最近更新:2024/03/16 浏览次数:

有时我们需要对类似于数字的字符串进行排序。例如,10 按字母顺序排在 2 之前,但在 02 之后。

前导零用于匹配数字的升序和字母顺序。这篇文章将教授如何在 JavaScript 中附加前导零。


在 JavaScript 中将前导零附加到数字

padStart() 方法是 JavaScript 提供的内置方法。此方法用另一个字符串填充或连接当前字符串,直到结果字符串达到指定长度。

如果有必要,它会多次附加它。填充从输入字符串的开头应用,它返回一个指定目标长度的字符串,并从开头应用 padString

语法:

padStart(targetLength)
padStart(targetLength, padString)

String.padStart 方法接受以下 2 个参数:

padStart 方法仅适用于字符串,因此要使用 padStart 方法,首先,我们必须将数字转换为字符串。在 padStart() 的文档中查找更多信息。

将前导零添加到数字的步骤:

  1. 将给定数字转换为新字符串。
  2. 调用 JavaScript 的 padStart() 方法将零附加/连接到字符串的开头。
  3. padStart 方法返回一个新的字符串,从头开始应用指定的填充字符串。
function addLeadingNumberZeros(number, totalLength) {
  return String(number).padStart(totalLength, '0');
}

console.log(addLeadingNumberZeros(4, 2));
console.log(addLeadingNumberZeros(4, 3));
console.log(addLeadingNumberZeros(4, 4));

输出:

"04"
"004"
"0004"
const num = '00' + 8;
console.log(num);

输出:

008

如果将填充字符串转换回数字,所有前导零都会自动删除,因为 008 === 8。JavaScript 不会保持前导零无关紧要。

如果输入字符串长度超过指定的目标长度,则整个字符串从 padStart 方法返回。如果你需要处理负数,你需要添加一个 if 语句,在添加前导零之后添加减号。

function addLeadingNumberZeros(number, totalLength) {
  if (number < 0) {
    const withoutNegativeSign = String(number).slice(1);
    return '-' + withoutNegativeSign.padStart(totalLength, '0');
  }

  return String(number).padStart(totalLength, '0');
}

console.log(addLeadingNumberZeros(3, 2));
console.log(addLeadingNumberZeros(-3, 3));

输出:

"03"
"-003"

添加一个 if 语句以检查是否将负数提供给函数。请注意,我们有意不在新字符串的目标长度中包含减号。

为了处理负数,我们必须删除减号,添加前导零,并将减号添加到字符串的开头。最好的替代方法和更简单的方法是使用加法运算符 (+)。

const positiveNumber = '00' + 7;
console.log(positiveNumber);

const negativeNumber = '-' +
    '00' + String(-7).slice(1);
console.log(negativeNumber);

当我们在任何浏览器中运行上面的代码时,你将得到以下输出。

输出:

"007"
"-007"

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Do you understand JavaScript closures?

发布时间:2025/02/21 浏览次数:108 分类:JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间:2025/02/21 浏览次数:178 分类:JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间:2025/02/21 浏览次数:150 分类:JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

用 jQuery 检查复选框是否被选中

发布时间:2024/03/24 浏览次数:102 分类:JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便