fix(compat): count code points when padding multi-byte strings

src/compat/_internal/createPadding.ts

@@ -0,0 +1,18 @@
+// eslint-disable-next-line no-misleading-character-class
+const regexMultiByte = /[\u200d\ud800-\udfff\u0300-\u036f\ufe20-\ufe2f\u20d0-\u20ff\ufe0e\ufe0f]/;
+
+export function stringSize(str: string): number {
+  return regexMultiByte.test(str) ? Array.from(str).length : str.length;
+}
+
+export function createPadding(length: number, chars: string): string {
+  const charsLength = stringSize(chars);
+
+  if (charsLength === 0 || length < 1) {
+    return '';
+  }
+
+  const result = chars.repeat(Math.ceil(length / charsLength));
+
+  return regexMultiByte.test(result) ? Array.from(result).slice(0, length).join('') : result.slice(0, length);
+}

src/compat/string/pad.spec.ts

@@ -65,6 +65,11 @@ describe('pad', () => {
     expect(actual).toEqual(expected);
   });
 
+  it('should treat multi-byte characters as a single code point when padding', () => {
+    expect(pad('ab', 8, '😀')).toBe('😀😀😀ab😀😀😀');
+    expect(pad('😀😁😂', 8, '_')).toBe('__😀😁😂___');
+  });
+
   it('should match the type of lodash', () => {
     expectTypeOf(pad).toEqualTypeOf<typeof padLodash>();
   });

src/compat/string/pad.ts

@@ -1,4 +1,5 @@
-import { pad as padToolkit } from '../../string/pad.ts';
+import { createPadding, stringSize } from '../_internal/createPadding.ts';
+import { toInteger } from '../util/toInteger.ts';
 import { toString } from '../util/toString.ts';
 
 /**
@@ -35,6 +36,17 @@
  * const result4 = pad('abc', 2);         // result will be 'abc'
  *
  */
-export function pad(str: any, length?: any, chars?: any): string {
-  return padToolkit(toString(str), length, chars);
+export function pad(str?: any, length: any = 0, chars: any = ' '): string {
+  const value = toString(str);
+  const targetLength = toInteger(length);
+  const strLength = stringSize(value);
+
+  if (targetLength <= strLength) {
+    return value;
+  }
+
+  const mid = (targetLength - strLength) / 2;
+  const padChars = `${chars}`;
+
+  return createPadding(Math.floor(mid), padChars) + value + createPadding(Math.ceil(mid), padChars);
 }

src/compat/string/padEnd.spec.ts

@@ -87,6 +87,11 @@ describe('padEnd', () => {
     expect(actual).toEqual(expected);
   });
 
+  it('should treat multi-byte characters as a single code point when padding', () => {
+    expect(padEnd('abc', 6, '😀')).toBe('abc😀😀😀');
+    expect(padEnd('😀😁😂', 8, '_')).toBe('😀😁😂_____');
+  });
+
   it('should match the type of lodash', () => {
     expectTypeOf(padEnd).toEqualTypeOf<typeof padEndLodash>();
   });

src/compat/string/padEnd.ts

@@ -1,3 +1,5 @@
+import { createPadding, stringSize } from '../_internal/createPadding.ts';
+import { toInteger } from '../util/toInteger.ts';
 import { toString } from '../util/toString.ts';
 
 /**
@@ -19,5 +21,13 @@ import { toString } from '../util/toString.ts';
  */
 
 export function padEnd(str?: string, length = 0, chars = ' '): string {
-  return toString(str).padEnd(length, chars);
+  const value = toString(str);
+  const targetLength = toInteger(length);
+  const strLength = stringSize(value);
+
+  if (targetLength <= strLength) {
+    return value;
+  }
+
+  return value + createPadding(targetLength - strLength, `${chars}`);
 }

src/compat/string/padStart.spec.ts

@@ -87,6 +87,11 @@ describe('padStart', () => {
     expect(actual).toEqual(expected);
   });
 
+  it('should treat multi-byte characters as a single code point when padding', () => {
+    expect(padStart('abc', 6, '😀')).toBe('😀😀😀abc');
+    expect(padStart('😀😁😂', 8, '_')).toBe('_____😀😁😂');
+  });
+
   it('should match the type of lodash', () => {
     expectTypeOf(padStart).toEqualTypeOf<typeof padStartLodash>();
   });

src/compat/string/padStart.ts

@@ -1,3 +1,5 @@
+import { createPadding, stringSize } from '../_internal/createPadding.ts';
+import { toInteger } from '../util/toInteger.ts';
 import { toString } from '../util/toString.ts';
 
 /**
@@ -18,5 +20,13 @@ import { toString } from '../util/toString.ts';
  * const result4 = padStart('abc', 2);          // result will be 'abc'
  */
 export function padStart(str?: string, length = 0, chars = ' '): string {
-  return toString(str).padStart(length, chars);
+  const value = toString(str);
+  const targetLength = toInteger(length);
+  const strLength = stringSize(value);
+
+  if (targetLength <= strLength) {
+    return value;
+  }
+
+  return createPadding(targetLength - strLength, `${chars}`) + value;
 }