目次
Overview
Aligning digits, such as zero-padding ID numbers (e.g., 001, 002) or formatting time displays (hh:mm:ss), is a frequent task in web application development. In the past, developers often implemented custom functions for these tasks. However, since the standardization of padStart and padEnd in ES2017, you can control string length in a very concise and safe way. This article explains how to use these methods through a practical example of creating a server uptime monitor.
Specifications (Input/Output)
The padStart and padEnd Methods
| Method | Operation | Return Value | Main Use Case |
padStart(targetLength, padString) | Fills the start of a string to reach a specific length | String | Zero-padding IDs, formatting dates/time |
padEnd(targetLength, padString) | Fills the end of a string to reach a specific length | String | Aligning logs, generating fixed-length text |
- Input:
targetLength: The desired length of the resulting string (Number).padString(Optional): The string to use for padding (Default is a half-width space).
- Output: A new string padded to the specified length. If the original string is already longer than the target length, the original string is returned as is without being truncated.
Basic Usage
1. Filling the Start (Zero-Padding)
This is the most common pattern for aligning numeric IDs or dates to a fixed number of digits.
const id = '5';
// Pad the start with '0' until it is 3 characters long
console.log(id.padStart(3, '0')); // "005"
const time = '9';
console.log(time.padStart(2, '0')); // "09"
2. Filling the End (Layout Alignment)
This is useful for aligning the length of labels in log outputs or list displays.
const label = 'Error';
// Pad the end with '.' until it is 10 characters long
console.log(label.padEnd(10, '.')); // "Error....."
Full Code Examples
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Server Uptime Monitor</title>
<style>
body {
background-color: #1e1e1e;
color: #e0e0e0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.dashboard {
background-color: #2d2d2d;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
text-align: center;
width: 320px;
}
h2 { margin: 0 0 1rem 0; font-size: 1rem; color: #aaa; }
.uptime-display {
font-family: 'Courier New', Courier, monospace;
font-size: 2.5rem;
font-weight: bold;
color: #4caf50;
margin-bottom: 1.5rem;
letter-spacing: 2px;
}
.log-area {
font-family: 'Courier New', monospace;
font-size: 0.85rem;
text-align: left;
background: #000;
padding: 10px;
border-radius: 4px;
color: #888;
}
</style>
</head>
<body>
<div class="dashboard">
<h2>SERVER UPTIME</h2>
<div class="uptime-display">
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div id="status-log" class="log-area">
Initializing...
</div>
</div>
<script src="uptime.js"></script>
</body>
</html>
JavaScript
/**
* Utility to convert a number to a string with a specified number of digits
* @param {number} num - Target number
* @param {number} length - Number of digits
* @returns {string} Zero-padded string
*/
const formatTime = (num, length = 2) => {
return String(num).padStart(length, '0');
};
// Getting DOM elements
const elHours = document.getElementById('hours');
const elMinutes = document.getElementById('minutes');
const elSeconds = document.getElementById('seconds');
const elLog = document.getElementById('status-log');
// Set a dummy server start time (e.g., 0:00:00 today)
const startTime = new Date();
startTime.setHours(0, 0, 0, 0);
/**
* Update monitor display
*/
function updateMonitor() {
const now = new Date();
// Calculate elapsed milliseconds
const diffMs = now - startTime;
const totalSeconds = Math.floor(diffMs / 1000);
// Convert to hours, minutes, and seconds
const h = Math.floor(totalSeconds / 3600);
const m = Math.floor((totalSeconds % 3600) / 60);
const s = totalSeconds % 60;
// Fix to 2 digits using padStart (e.g., 5 -> "05")
elHours.innerText = formatTime(h);
elMinutes.innerText = formatTime(m);
elSeconds.innerText = formatTime(s);
// Layout alignment demo using padEnd for log messages
// Toggle status between Network and Database based on even/odd seconds
const statusLabel = s % 2 === 0 ? "Network" : "Database";
const statusValue = "OK";
// Pad with dots until the label reaches 12 characters (e.g., "Network.....")
const logMessage = `${statusLabel.padEnd(12, '.')} ${statusValue}`;
elLog.innerText = logMessage;
// Execute on the next frame
requestAnimationFrame(updateMonitor);
}
// Start execution
updateMonitor();
Customization Tips
- Changing the Padding Character: You can fill strings with characters other than zero by changing the
padStringargument. For example,String(price).padStart(5, '_')results in__500. - Adjusting the Length: You can support displays like milliseconds (3 digits) by changing the
lengthargument in theformatTimefunction. For example,String(ms).padStart(3, '0'). - Right-Aligned Layouts: By using
padStartwith spaces instead ofpadEnd, you can achieve right-aligned text in monospace font environments.
Important Notes
- Strings Only: The
padStartandpadEndmethods do not exist on the Number type. You must convert numbers to strings usingString(num)ornum.toString()before calling these methods. - When the Original String is Long: If the original string is longer than the specified
targetLength, no padding occurs and the string is returned in its entirety without being cut. For example,'12345'.padStart(3, '0')returns'12345'. - Handling Multi-byte Characters: The
lengthargument counts the number of characters, not bytes or visual width. Layouts may break if full-width characters are mixed in. You may need separate logic to handle character width in those cases.
Advanced Applications
Masking Credit Card Numbers
While not a typical padEnd use case, padStart can be used to hide sensitive information.
const creditCard = '1234567812345678';
const last4Digits = creditCard.slice(-4); // Get last 4 digits "5678"
// Pad the start with '*' until it reaches the original length
const masked = last4Digits.padStart(creditCard.length, '*');
console.log(masked); // "************5678"
Conclusion
The padStart and padEnd methods are powerful tools that allow you to complete digit-filling tasks in a single line, which previously required loops or conditional branches. You should use padStart for zero-padding dates or IDs and use padEnd for aligning logs or tabular data. It is important to remember that these methods must be called on strings. These standard features should be actively adopted in modern JavaScript development to improve code readability.
