JavaScript 中的前导零
有时我们需要对类似于数字的字符串进行排序。例如,10 按字母顺序排在 2 之前,但在 02 之后。
前导零用于匹配数字的升序和字母顺序。这篇文章将教授如何在 JavaScript 中附加前导零。
在 JavaScript 中将前导零附加到数字
padStart()
方法是 JavaScript 提供的内置方法。此方法用另一个字符串填充或连接当前字符串,直到结果字符串达到指定长度。
如果有必要,它会多次附加它。填充从输入字符串的开头应用,它返回一个指定目标长度的字符串,并从开头应用 padString
。
语法:
padStart(targetLength)
padStart(targetLength, padString)
String.padStart
方法接受以下 2 个参数:
padStart
方法仅适用于字符串,因此要使用 padStart
方法,首先,我们必须将数字转换为字符串。在 padStart() 的文档中查找更多信息。
将前导零添加到数字的步骤:
- 将给定数字转换为新字符串。
- 调用 JavaScript 的
padStart()
方法将零附加/连接到字符串的开头。 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"
相关文章
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 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间:2024/03/24 浏览次数:180 分类:JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。