refactor: introduce trString for frontend (#38741)

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>

web_src/js/modules/fomantic/dropdown.ts

@@ -1,5 +1,6 @@
 import type {FomanticInitFunction} from '../../types.ts';
 import {generateElemId, queryElems} from '../../utils/dom.ts';
+import {trString} from '../i18n.ts';
 
 const ariaPatchKey = '_giteaAriaPatchDropdown';
 const fomanticDropdownFn = $.fn.dropdown;
@@ -63,7 +64,7 @@ function updateSelectionLabel(label: HTMLElement) {
   const deleteIcon = label.querySelector('.delete.icon');
   if (deleteIcon) {
     deleteIcon.setAttribute('aria-hidden', 'false');
-    deleteIcon.setAttribute('aria-label', window.config.i18n.remove_label_str.replace('%s', label.getAttribute('data-value')!));
+    deleteIcon.setAttribute('aria-label', trString(window.config.i18n.remove_label_str, label.getAttribute('data-value')!));
     deleteIcon.setAttribute('role', 'button');
   }
 }

web_src/js/modules/i18n.test.ts

@@ -1,4 +1,4 @@
-import {trN} from './i18n.ts';
+import {trN, trString} from './i18n.ts';
 
 test('trN', () => {
   expect(trN(0, '%d job', '%d jobs', {lang: 'en-US'})).toEqual('0 jobs');
@@ -8,3 +8,10 @@ test('trN', () => {
   // languages without a distinct singular always use the plural form
   expect(trN(1, '%d job', '%d jobs', {lang: 'zh-CN'})).toEqual('1 jobs');
 });
+
+test('trString', () => {
+  expect(trString('from %s to %d', 'main', 12)).toBe('from main to 12');
+  expect(trString('from %[1]s to %[2]d', 'main', 12)).toBe('from main to 12');
+  expect(trString('from %s to %[2]d', 'main', 12)).toBe('from main to 12');
+  expect(trString('from %s to %[3]d', 'main', 12)).toBe('from main to %[3]d');
+});

web_src/js/modules/i18n.ts

@@ -2,6 +2,21 @@ import {getCurrentLocale} from '../utils.ts';
 
 /** frontend `Locale.TrN`: pick the `_1` or `_n` form for `count` and interpolate `%d` */
 export function trN(count: number, form1: string, formN: string, {lang = getCurrentLocale()}: {lang?: string} = {}): string {
-  const form = new Intl.PluralRules(lang).select(count) === 'one' ? form1 : formN;
-  return form.replace('%d', String(count));
+  const text = new Intl.PluralRules(lang).select(count) === 'one' ? form1 : formN;
+  return trString(text, String(count));
+}
+
+/**
+ * Fills variables in a translated string (like TrString in Golang)
+ * Only `%s`, `%d` or one-based position like `%[1]s` are supported.
+ */
+export function trString(s: string, ...args: Array<string | number>) {
+  // the same behavior (almost) as backend TrString
+  let curIdx = 0;
+  return s.replace(/%%|%(?:\[([1-9]\d*)\])?([sd])/g, (match, indexed: string) => {
+    if (match === '%%') return '%';
+    const argIndex = indexed ? Number(indexed) - 1 : curIdx++;
+    if (argIndex < 0 || argIndex >= args.length) return match;
+    return String(args[argIndex]);
+  });
 }