I took the method of formatting strings in JS from the answer to en.SO and adapted it to my needs. Initially, everything was written in global variables and worked.

But global variables are not good, added a wrapper function and exported.

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

In another script I imported and used:

 import 'fileWithFormatStringMethod.js' .... a.href = canvas.toDataURL("image/{0}".formatString(dataFormat)); ....

The console got the error:

 Uncaught (in promise) TypeError: "image/{0}".formatString is not a function

I tried to explicitly import the method in the calling file.

 import { formatString } from 'fileWithFormatStringMethod.js'

Classes are imported without problems from the same file.

  import { elementByClass, elementById } from 'fileWithFormatStringMethod.js'

Tell me what I did wrong?

  • 2
    it is necessary in this case to import the method as follows: import {formatString} from 'pathToFile'; This must be done at the point of application initialization. and immediately after, call the formatString method to override the method in the String object. But the approach itself is strange. Why not just make it a pure function? @ while1pass import only gives a link to the method, but does not comply with it - Vasily Barbashev
  • one
    @ while1pass, syntax imports working, I'm just used to more detailed. The problem itself is explained in my first comment - Duck Learns to Hide
  • one
    @ while1pass, see you have two functions formatString. The first - when calling, appends the ability to call the second to all lines. In your code, you import the first one (just take it, do not call it), and try to call it - the second one. Since the first did not work, the second - no. - Duck Learns to Take Cover
  • 2
    @ while1pass goo.gl/GfS7yE . A pure function is a special kind of function that returns values ​​that not only has no side effects, but does not depend on the side effects of the rest of the code — for example, it does not work with global variables that can be accidentally changed elsewhere. A pure function, when called with the same arguments, returns the same result. Those. your function can be done like this: you pass a string to it, and the processed string is returned. And do not wedge in global objects and add handlers to them - Vasily Barbashev
  • 2
    @ while1pass, pure fukntion is roughly a thing that accepts something, and on the basis of this returns a predictable result and does not change anything more, does not call and does not require outside of itself. No prototypes of global variables and other things. - Duck Learns to Take Cover

2 answers 2

Using the switch functions, you can reduce the amount of code:

 export const formatString = (s, p) => s.replace(/{(\d+)}/g, (match, number) => p[number] || match); // ... import { formatString } from '...';

And a slightly different version of the function, so that the parameters are not transferred in an array, but in an object with keys (you only need to change the reg. Expression to / /{(.*?)}/g ) To:):

 export const formatString = (s, p) => s.replace(/{(.*?)}/g, (match, key) => p[key] || match); formatString('image/{id}/', { id: 123 }); // "image/123/" formatString('image/{id}/{size}', { id: 123, size: '100x100' }); // "image/123/100x100"
  • succinctly. only arrow functions are not so obvious, in my opinion - while1pass

Rewrote the function with the recommendations Moderately Uporotaya Duck and Vasily Barbashev

 export default function formatString(string, args) { return string.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != 'undefined' ? args[number] : match ; }); }

Using:

  a.href = canvas.toDataURL(formatString("image/{0}", [dataFormat,]));

If you can improve the code, please unsubscribe

  • 2
    you can not check for typeof args[number] , and immediately write return args[number] ? args[number] : match; return args[number] ? args[number] : match; if you write to es6 then pastebin.com/iJ7335b1 , if there is a set of methods in the file, then it is better to use export const functionString = (...) => ... , then you will need to import by name through {formatString} - Vasily Barbashev
  • 2
    or even in the condition args[number] || match args[number] || match pastebin.com/Epya1Lc3 but all this is not important :) - Vasily Barbashev