Phương thức String.trimStart() và String.trimEnd() trong JavaScript

Loại bỏ khoảng trắng đầu/cuối chuỗi

ES2019 (ES10) giới thiệu hai phương thức mới để kiểm soát chính xác việc xóa khoảng trắng:

• trimStart(): Xóa khoảng trắng đầu chuỗi (left trim). Alias: trimLeft().
• trimEnd(): Xóa khoảng trắng cuối chuỗi (right trim). Alias: trimRight().

Hai phương thức này bổ sung cho trim() (xóa cả đầu và cuối).

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>trimStart và trimEnd</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result, .sample { font-size: 20px; font-weight: 500; font-family: monospace; }
        .result { color: green; }
        button { padding: 8px 16px; cursor: pointer; }
    </style>
</head>
<body>
    <h1>String.trimStart() và String.trimEnd()</h1>
    <div class="sample"></div>
    <div class="result"></div>
    <button class="btn-demo">CẮT KHOẢNG TRẮNG</button>
    <h3>Nhấn nút để cắt khoảng trắng đầu và cuối chuỗi</h3>

    <script>
        const resEle = document.querySelector(".result");
        const sampleEle = document.querySelector(".sample");
        const btn = document.querySelector(".btn-demo");

        // Chuỗi có khoảng trắng đầu và cuối
        const str = "   HELLO WORLD   ";
        sampleEle.innerHTML = 'Chuỗi gốc: "|' + str + '|" (dùng | để thấy khoảng trắng)';

        btn.addEventListener("click", () => {
            resEle.innerHTML = 'trimStart() : "|' + str.trimStart() + '|"<br>';
            resEle.innerHTML += 'trimEnd() : "|' + str.trimEnd() + '|"<br>';
            resEle.innerHTML += 'trim() : "|' + str.trim() + '|"';
        });
    </script>
</body>
</html>

Kết quả

Chuỗi gốc: "|   HELLO WORLD   |"
trimStart() : "|HELLO WORLD   |"
trimEnd() : "|   HELLO WORLD|"
trim() : "|HELLO WORLD|"

Các ký tự được coi là "khoảng trắng"

Bao gồm: space ( ), tab (\t), newline (\n), carriage return (\r), form feed (\f), non-breaking space (\u00A0), và các ký tự Unicode space khác.

So sánh với trim()

Ứng dụng thực tế

// Xử lý input người dùng: chỉ cắt đầu, giữ cuối cho format
const input = "  Nguyễn Văn A  ";
const formatted = input.trimStart(); // "Nguyễn Văn A  "

// Kết hợp với padStart/padEnd để căn chỉnh
const lines = ["A", "BB", "CCC"].map(s => s.trimEnd().padEnd(5, '.'));
// ["A....", "BB...", "CCC.."]

Hỗ trợ trình duyệt

Chrome 66+, Firefox 61+, Safari 12+, Edge 79+. Để tương thích cũ, có thể dùng polyfill hoặc regex: str.replace(/^\s+/, '') (trimStart) và str.replace(/\s+$/, '') (trimEnd).