JavaScript padStart() 方法

2025年4月5日 | 阅读 3 分钟

padStart() 方法返回一个通过在字符串开头填充另一个字符串而达到预定长度的结果字符串。

一旦字符串达到指定长度，就可以使用 JavaScript 的 padStart() 方法用另一个字符串进行填充。填充应用于字符串的左侧。

语法

以下语法显示了 javascript padStart() 方法及其输入参数。

参数：该方法接受的两个参数如上所示，并如下描述：

inputLength：这是对原始字符串应用填充后的字符串长度。如果该值小于原始字符串的长度，则返回原始字符串。
inputString：需要用原始字符串进行填充的字符串称为 inputString。如果该值过长而无法放入 inputLength，则从末尾进行截断。空格字符 ("") 是字符串中使用的默认字符。

返回值：它提供通过 supplied string 扩展后的最终字符串。

示例

以下示例显示了 padStart() 方法及其 javascript 操作。

示例 1

该示例通过 javascript 函数展示了 padStart() 方法及其操作。输入值小于方法所需的填充长度。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<script>
let text = "15";
text = text.padStart(5,"0");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "8";
text1 = text1.padStart(5,"0");
document.getElementById("inputdemo1").innerHTML = text1;
</script>
</body>
</html>

输出

显示的图像是 padStart 函数作为输出的信息。

示例 2

该示例通过 javascript 函数展示了 padStart() 方法及其操作。输入值显示了“等于”、“小于”和“大于”方法所需填充长度之间的差异。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<p id = "inputdemo2"></p>
<script>
let text = "15124";
text = text.padStart(5,"0");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "81198643";
text1 = text1.padStart(5,"0");
document.getElementById("inputdemo1").innerHTML = text1;
let text2 = "3";
text2 = text2.padStart(5,"0");
document.getElementById("inputdemo2").innerHTML = text2;
</script>
</body>
</html>

输出

显示的图像是 padStart 函数作为输出的信息。

示例 3

该示例通过 javascript 函数展示了 padStart() 方法及其操作。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript padStart() method </title>
</head>
<body>
<h3> JavaScript padStart() method  </h3>
<p> The padStart() method shows the extra a string with required string length </p>
<p id = "inputdemo"></p>
<p id = "inputdemo1"></p>
<p id = "inputdemo2"></p>
<button onclick="clickHere()">
    Click Here
</button>
<script>
function clickHere() {
let text = "TpointTech";
text = text.padStart(15,"$");
document.getElementById("inputdemo").innerHTML = text;
let text1 = "JAVASCRIPT";
text1 = text1.padStart(18,"@@");
document.getElementById("inputdemo1").innerHTML = text1;
let text2 = "LEARN";
text2 = text2.padStart(5,"%");
document.getElementById("inputdemo2").innerHTML = text2;
}
</script>
</body>
</html>

输出

显示的图像是 padStart 函数作为输出的信息。

支持的 Web 浏览器

padStart() 方法支持的浏览器列表如下：

谷歌浏览器
火狐
边
Safari
Opera

结论

padStart() 方法根据所需长度显示输出值。此方法适用于数据管理功能的字符串和对象值大小。

下一主题Promise-chaining-in-javascript

JavaScript padStart() 方法

语法

支持的 Web 浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript padStart() 方法

语法

支持的 Web 浏览器

结论

相关帖子

Javascript translate() 方法

如何在 javascript 中使用 mousedown 事件

如何在 JavaScript 中移除类

PolyFill JS

Javascript history.pushState() 方法

JavaScript 设计模式

如何使用 JavaScript 选择所有复选框

Javascript Focus 方法

JavaScript hashchange 事件

JavaScript string repeat() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程