用 jQuery 在数字前面加上额外的 0

在前端开发中，我们经常需要对数字进行格式化处理。其中一个常见需求是将单个数字转化为两位数，即在数字前补零。本文将介绍如何使用 jQuery 实现这个功能。

1. 使用 JavaScript 字符串方法

JavaScript 提供了一些字符串方法可以用来实现在数字前补零的功能，比如 padStart() 方法。但是由于该方法不是所有浏览器都支持，因此我们需要使用 polyfill 进行兼容性处理。以下是使用 padStart() 方法的示例代码：

var num = 9;
var str = String(num).padStart(2, '0');
console.log(str);  // 输出 "09"

2. 使用 jQuery 的 $.fn.text() 方法

jQuery 提供了一个用于获取或设置元素文本内容的方法 $.fn.text()。我们可以将数字通过该方法获取到，并在前面拼接 '0'。以下是使用 $.fn.text() 方法的示例代码：

<div id="num">9</div>

var $num = $('#num');
var numStr = $num.text().trim();
$num.text('0' + numStr.padStart(1, '0'));
console.log($num.text());  // 输出 "09"

3. 使用 jQuery 的 $.fn.html() 方法

与 $.fn.text() 方法类似，jQuery 还提供了一个用于获取或设置元素 HTML 内容的方法 $.fn.html()。我们可以将数字通过该方法获取到，并在前面拼接 <span> 标签以及 '0' 字符串，最后将 HTML 代码赋值给元素的 innerHTML 属性。以下是使用 $.fn.html() 方法的示例代码：

<div id="num">9</div>

var $num = $('#num');
var numStr = $num.text().trim();
$num.html('<span>0</span>' + numStr.padStart(1, '0'));
console.log($num.html());  // 输出 "<span>0</span>9"

总结

本文介绍了如何使用 JavaScript 字符串方法和 jQuery 的 $.fn.text()、$.fn.html() 方法实现在数字前面加上额外的 0 的功能。其中，使用 $.fn.text() 和 $.fn.html() 方法可以直接操作元素内容，更加灵活。但是需要注意，这两个方法都会对元素内容进行转义处理，因此可能会影响特殊字符的展示效果。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13058