Create a string of variable length, filled with a repeated character

javascript

prompt-engineering

performance

string-manipulation

byAnton Shumikhin·Nov 3, 2024

Here's one for the quick draw: craft a string repeating the same character using the .repeat() method.

Example:

const heyLook = 'x'.repeat(5); // x marks the spot, five times: "xxxxx"

Without a shadow of a doubt, your repeat count should be a non-negative integer, otherwise you'll unleash the terrible beast called a RangeError.

In the case where modernity hasn't graced your environment with ES6 support, we've got your back:

var alternativeReality = new Array(6).join('x'); // "xxxxx". Yep, it also `x` marks the spot.

Be aware: The array length is a tricky '+1' here, which takes 'x' love for you to the max.

The old guards: Pre-ES6 styles

Array to the rescue

For browsers still reminiscing the past, or someone who loves to stay in control, use the array join pattern:

var legacyString = new Array(5 + 1).join('A'); // Fills up with the letter 'A'. Very 'A'ppreciated.

While String.repeat() has the cool kid aura, this approach is excellent for compatibility and flexible memory management.

The clever cut: substring usage

Does this sound familiar? You need a certain length substring of a longer, unchanging string? Say no more:

const longString = 'XXXX...'; // A lot of 'X's. Let's assume it's 1000 of them.
const shortString = longString.substring(0, 5); // "XXXXX". It's like your own little piece of the big 'X'.

A prime method considering maximum length of your generated strings are within bounds.

Juggling with strings interactively

Focus, blur, repeat!

Dealing with form inputs, demands dynamically managed strings. Event handlers do this with style on focus and blur:

// If left empty, let's fill 'er up!
inputElement.onblur = function() {
  if (this.value === '') {
    this.value = '#'.repeat(this.maxLength); // Hashtag trend just got a competitor
  }
};

// Try again, friend
inputElement.onfocus = function() {
  if (this.value === '#'.repeat(this.maxLength)) { // Everyone deserves a second chance
    this.value = '';
  }
};

Keeping the UX alive with a consistent, user-friendly input experience.

The dynamic duo: HTML maxlength & Javascript

<input type="text" maxlength="10">

Using maxlength here allows JavaScript to dynamically set the string size to prevent unexpected keyboard warrior outbreaks.

Big picture: Performance insights

Speed vs Space: The eternal debate

The trade-off between speed and memory usage becomes evident for larger string sizes. Dial up some performance profiling with tools like jsperf to truly know what's happening under the hood.

Double the goods: Doubling method

The doubling method trades memory efficiency for faster string concatenation, especially gigantic ones. It's an economy in itself:

function doubleRepeat(char, length) {
  let str = char;
  while (str.length * 2 <= length) {
    str += str; // Double, bubble, toil, and trouble.
  }
  str += str.substring(0, length - str.length); // The final touch.
  return str; // Et voila!
}