I was working on my React project, fetching some data using fetch, and looking for a good way to do something like this Python code:

"{a} {b}!".format(a = "Hello", b = "World") # == "Hello World!"

💡 Why not use JavaScript string interpolation, you may ask? I want to put the params elsewhere, not within the string.

So I spent hours doing Regex went code scavenging on Stack Overflow, and I found this. It’s interesting that there is a function named formatUnicorn right on Stack Overflow’s website, which does exactly what I was looking for:

But I was hesitant to loot the code. I want to keep my code base as strongly typed as possible, and modifying the String prototype makes me feel insecure. What’s more, I would like to have at least some validation in case someone else forgot to pass in a and/or b. Implementing that seems beyond my scope of work, and installing another library is overkill. I was staring at the import section (just to make sure that I don’t import so much 3rd party stuff to keep our SPA app startup fast since FCP is crucial to our business), and that’s when I saw react-router import…

React Router lets you register routes with params like this:

path: "teams/:teamId",

So they must have implemented that “unicorn format” somewhere. I skimmed over their exports hoping that they would expose that unicorn function so I could use it, and thankfully they did:

And the function is unicornly strong typed:

💡 Did you expect that TypeScript can infer substrings as types like above? I didn’t!

The moral of the story

Sometimes, installing one more library may not be necessary because what you need is already (unexpectedly) available elsewhere within your project. Bundling too many libraries can greatly affect performance if it is crucial to your business.

I hope my story was inspiring!