How Can I Efficiently Pad Strings in JavaScript?

JavaScript Function for String Padding

Introduction

Padding a string involves adding characters to the start or end to reach a desired length. This is useful in various scenarios, such as alignment in tables or formatting numbers. This article explores a JavaScript function that facilitates string padding.

Pre-ES8 Solutions

Before ECMAScript 8 (ES8), developers employed various methods for string padding. One simple approach involves concatenating the string with a predefined padding value and slicing the result to obtain the desired length:

var n = 123;

String("00000" + n).slice(-5); // returns 00123
("00000" + n).slice(-5); // returns 00123
("     " + n).slice(-5); // returns "  123" (with two spaces)

Another solution extends the string object with a paddingLeft method:

String.prototype.paddingLeft = function (paddingValue) {
   return String(paddingValue + this).slice(-paddingValue.length);
};

This method can be used as follows:

function getFormattedTime(date) {
  var hours = date.getHours();
  var minutes = date.getMinutes();

  hours = hours.toString().paddingLeft("00");
  minutes = minutes.toString().paddingLeft("00");

  return "{0}:{1}".format(hours, minutes);
};

String.prototype.format = function () {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function (match, number) {
        return typeof args[number] != 'undefined' ? args[number] : match;
    });
};

ES8 and Beyond

ES8 introduced the String.padStart method, which simplifies string padding:

"Jonas".padStart(10); // Default pad string is a space
"42".padStart(6, "0"); // Pad with "0"
"*".padStart(8, "-/|\"); // produces '-/|\-/|*'

If String.padStart is not available, a polyfill can be used to add it. The following polyfill extends the string object:

String.prototype.padLeft = function (desiredLength) {
  var padString = " ";
  if (arguments.length > 1) {
    padString = arguments[1];
  }

  var padLength = desiredLength - this.length;
  if (padLength >= 0) {
    return padString.repeat(Math.ceil(padLength / padString.length)).slice(0, padLength) + this;
  } else {
    return this;
  }
};

The above is the detailed content of How Can I Efficiently Pad Strings in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!