解决 ES8 String.prototype.padStart() 和 String.prototype.padEnd() 在 Safari 浏览器中的兼容性问题

在现代的前端开发中，我们经常需要处理字符串的格式问题。ES8 引入了两个新的 String 原型方法：String.prototype.padStart() 和 String.prototype.padEnd()，它们可以方便地用于填充字符串。

例如，如果我们想让一个字符串的长度达到指定长度，我们可以使用 String.prototype.padStart() 填充空格：

const str = 'hello';
const paddedStr = str.padStart(10);
console.log(paddedStr); // "     hello"

然而，这两个方法在 Safari 浏览器中的兼容性问题令人头痛。在 macOS 和 iOS 上的 Safari 浏览器中，这两个方法不支持填充 Unicode 字符串：

const str = '你好';
const paddedStr = str.padStart(10, '😂');
console.log(paddedStr); // "😂😂😂😂😂你好"

在这个例子中，填充的字符串是一个 Unicode 表情符，但在 Safari 中，它被视为一个字符而不是五个字符，因此填充的结果不符合预期。

解决方案

为了解决 Safari 中的兼容性问题，我们可以使用 String.repeat() 方法来代替填充 Unicode 字符串：

const str = '你好';
const padLength = 10 - str.length;
const filledStr = '😂'.repeat(padLength);
const paddedStr = filledStr + str;
console.log(paddedStr); // "😂😂😂😂😂你好"

这段代码首先计算需要填充的字符数量，然后使用 String.repeat() 方法来生成填充字符。最后，它将填充后的字符串和原始字符串拼接在一起。

为了更好地支持多种情况，我们可以把这个方法封装成一个通用的函数：

function padString(string, targetLength, padString) {
  const filler = padString.repeat(targetLength - string.length);
  return filler + string;
}

const str = '你好';
const paddedStr = padString(str, 10, '😂');
console.log(paddedStr); // "😂😂😂😂😂你好"

在这个例子中，padString() 函数接收三个参数：原始字符串、目标长度和填充字符。它使用 String.repeat() 方法生成填充字符，并将填充后的字符串和原始字符串拼接在一起。

结论

ES8 中的 String.prototype.padStart() 和 String.prototype.padEnd() 方法是非常有用的，但在 Safari 浏览器中，它们不支持填充 Unicode 字符串。为了解决这个兼容性问题，我们可以使用 String.repeat() 方法来生成填充字符，并将其封装成一个通用的函数，以便更好地支持使用。这个例子展示了在解决实际问题时如何遇到并解决浏览器兼容性问题，并提供了一个通用的解决方案。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6751112b050cf9039c19cd5f