Merge pull request #5285 from abpframework/fix/5282

Matched parameter order when replacing placeholders in LocalizationPipe

npm/ng-packs/packages/core/src/lib/states/config.state.ts

@@ -9,6 +9,7 @@ import { RestOccurError } from '../actions/rest.actions';
 import { SetLanguage } from '../actions/session.actions';
 import { ApplicationConfiguration } from '../models/application-configuration';
 import { Config } from '../models/config';
+import { interpolate } from '../utils/string-utils';
 import { SessionState } from './session.state';
 
 @State<Config.State>({
@@ -180,14 +181,12 @@ export class ConfigState {
         return defaultValue || sourceKey;
       }
 
+      // [TODO]: next line should be removed in v3.2, breaking change!!!
       interpolateParams = interpolateParams.filter(params => params != null);
-      if (localization && interpolateParams && interpolateParams.length) {
-        interpolateParams.forEach(param => {
-          localization = localization.replace(/[\'\"]?\{[\d]+\}[\'\"]?/, param);
-        });
-      }
+      if (localization) localization = interpolate(localization, interpolateParams);
 
       if (typeof localization !== 'string') localization = '';
+
       return localization || defaultValue || (key as string);
     });
 

npm/ng-packs/packages/core/src/lib/tests/string-utils.spec.ts

@@ -1,4 +1,4 @@
-import { createTokenParser } from '../utils/string-utils';
+import { createTokenParser, interpolate } from '../utils/string-utils';
 
 describe('String Utils', () => {
   describe('#createTokenParser', () => {
@@ -19,4 +19,28 @@ describe('String Utils', () => {
       },
     );
   });
+
+  describe('#interpolate', () => {
+    test.each`
+      text                                         | params                          | expected
+      ${'This is {0} and {1} example.'}            | ${['foo', 'bar']}               | ${'This is foo and bar example.'}
+      ${'This is {1} and {0} example.'}            | ${['foo', 'bar']}               | ${'This is bar and foo example.'}
+      ${'This is {0} and {0} example.'}            | ${['foo', 'bar']}               | ${'This is foo and foo example.'}
+      ${'This is {1} and {1} example.'}            | ${['foo', 'bar']}               | ${'This is bar and bar example.'}
+      ${'This is "{0}" and "{1}" example.'}        | ${['foo', 'bar']}               | ${'This is foo and bar example.'}
+      ${"This is '{1}' and '{0}' example."}        | ${['foo', 'bar']}               | ${'This is bar and foo example.'}
+      ${'This is { 0 } and {0} example.'}          | ${['foo', 'bar']}               | ${'This is foo and foo example.'}
+      ${'This is {1} and {  1  } example.'}        | ${['foo', 'bar']}               | ${'This is bar and bar example.'}
+      ${'This is {0}, {3}, {1}, and {2} example.'} | ${['foo', 'bar', 'baz', 'qux']} | ${'This is foo, qux, bar, and baz example.'}
+      ${'This is {0} with 0 example.'}             | ${['foo']}                      | ${'This is foo with 0 example.'}
+      ${'This is {0} and {1} example.'}            | ${['foo']}                      | ${'This is foo and {1} example.'}
+      ${'This is {0} and {1} example.'}            | ${[]}                           | ${'This is {0} and {1} example.'}
+      ${'This is {0} example.'}                    | ${[null]}                       | ${'This is {0} example.'}
+    `(
+      'should return $expected when text is $text and params are $params',
+      ({ text, params, expected }) => {
+        expect(interpolate(text, params)).toBe(expected);
+      },
+    );
+  });
 });

npm/ng-packs/packages/core/src/lib/utils/string-utils.ts

@@ -15,3 +15,9 @@ export function createTokenParser(format: string) {
     }, {} as Record<string, string[]>);
   };
 }
+
+export function interpolate(text: string, params: string[]) {
+  return text
+    .replace(/(['"]?\{\s*(\d+)\s*\}['"]?)/g, (_, match, digit) => params[digit] ?? match)
+    .replace(/\s+/g, ' ');
+}