JavaScript 字符串格式化：带示例的方法

什么是 JavaScript 字符串格式化？

JavaScript 字符串格式化是指用于以定义好的形式来操作和格式化字符串的方法。它是任何编程语言中的一项关键功能，可以让你控制应用程序中显示的文本。

在你的 JavaScript 代码中，字符串格式化可以将复杂数据以简单的方式转换。它还可以提高输出的可读性，并使代码更易于维护。此外，正确格式化的 JavaScript 字符串也可以在提升应用程序用户体验方面发挥作用。

如何在 JavaScript 中格式化字符串？

要在 JavaScript 中格式化字符串，请遵循提供的步骤

步骤 1）首先，需要确定要在字符串中包含的数据。

步骤 2）然后，选择一种 JS 字符串格式化方法。

步骤 3）相应地编写代码以实现它。

步骤 4）测试代码，确保其生成预期输出。

步骤 5）更新或修改代码以满足额外的格式化需求。

步骤 6）重构代码以提高可维护性和可读性。

JavaScript 中的不同字符串格式化方法

有多种方法可以在 JavaScript 中格式化字符串，包括连接运算符、模板文字、正则表达式等。

在下一节中，您将探讨以下方法

• 带反引号的 {} 括号
• “+” 运算符
• 自定义函数字符串格式化
• 连接运算符
• 模板文字
• 正则表达式
• 自定义函数
• 三元运算符

方法 1：在 JavaScript 中使用带反引号的 {} 括号格式化字符串

在此方法中，您可以使用模板文字，通过添加反引号（`）来包围字符串。然后，将字符串参数的变量插入到以美元符号“$”为前缀的括号 {} 中。这些模板允许您在字符串字面量中嵌入表达式。

此操作有助于连接称为占位符的变量和其他定义的。结果，通过插值占位符的值获得最终格式化的字符串。

例如，我们创建了两个变量“name”和“id”，然后将它们用反引号包围以生成格式化输出。请注意，“${}”语法用于将表达式嵌入到字符串中。

代码

const name = "Jenny";
const id = 1;
console.log (`Welcome ${name}, your ID is ${id}`);

可以看到，“name”和“id”占位符的值已显示，这意味着字符串插值已成功执行。

输出

Welcome Jenny, your ID is 1

方法 2：在 JavaScript 中使用 + 运算符格式化字符串

第二种方法是使用连接运算符“+”来进行基本的 JavaScript 字符串格式化。此方法涉及将单个变量和字符串连接起来以生成所需的输出。

例如，我们现在使用了“+”运算符连接了相同的变量值，并且“console.log()”方法将在控制台上返回一个格式化的字符串。

代码

const name = "Jenny";
const id = 1;
console.log("Welcome " + name + ", your ID is " + id);

输出

Welcome Jenny, your ID is 1

方法 3：自定义函数 JavaScript 字符串格式化

在您的JavaScript 程序中，您还可以使用自定义函数字符串格式化方法。在此技术中，该函数接受所需的变量并返回格式化的字符串。此格式函数还提供了很大的灵活性。您还可以使用它来满足自定义或复杂的格式化要求。

在这里，我们创建了一个名为“welcomeMsg()”的自定义格式函数，该函数接受“name”和“id”两个变量作为参数，并通过使用模板字符串文字来输出格式化的字符串。

之后，我们定义了所需的变量并将它们传递给格式化自定义格式函数调用。

代码

function welcomeMsg(name, id) {
  return `Welcome ${name}, your ID is ${id}`;
}
const name = "Jenny";
const id = 1;
const msg = welcomeMsg(name, id);
console.log(msg);

输出

Welcome Jenny, your ID is 1

方法 4：在 JavaScript 中使用连接来格式化字符串

连接是一种用于 JavaScript 字符串格式化的简单方法。此方法涉及使用连接运算符“+”将字符串变量或多个字符串组合在一起。您也可以将此技术用于简单的字符串连接任务。

在提供的示例中，“firstName”和“lastName”变量将使用“+”运算符连接起来，形成“fullName”字符串，如下所示。

代码

var firstName = "Alex";
var lastName = "Edward";
var fullName = firstName + " " + lastName;
console.log(fullName);

输出

Alex Edward

方法 5：在 JavaScript 中使用模板文字来格式化字符串

模板字符串，也称为模板文字，提供了更具表现力且更高级的 JavaScript 字符串格式化方法。它们允许使用占位符“${expression}”直接将表达式和变量嵌入到字符串中。

此外，模板文字还支持多行字符串。

代码

var name = "Alex";
var age = 30;
var msg = `Hi, ${name}! You are ${age} years old.`;
console.log(msg);

在上面的示例中，我们通过在模板文字的反引号（`）中使用占位符“${}”，直接将变量“name”和“age”插入到字符串中。

输出

Hi, Alex! You are 30 years old.

方法 6：在 JavaScript 中使用正则表达式格式化字符串

在 JavaScript 代码中，正则表达式是用于字符串操作和模式匹配的强大工具。此外，它们还用于查找给定模式并用定义的值替换它们。此操作可以通过“replace ()”方法完成。

查看下面的程序，replace() 方法与两个正则表达式一起使用，这两个正则表达式会将占位符“[name]”和“[id]”替换为相应的值。

代码

let name = "Jenny";
let id = 1;
let message = "Welcome [name], your ID is [id]".replace(/\[name\]/g, name).replace(/\[id\]/g, id);
console.log(message);

这将结果存储在一个新的字符串对象中，该对象将存储在“message”变量中，并在控制台上记录为输出。

输出

Welcome Jenny. Your ID is 1

方法 7：使用自定义函数来格式化 JavaScript 字符串

您还可以创建更具可重用性和定制性的 JavaScript 字符串格式。为此，请定义一个接受字符串和其他参数的新自定义函数。您可以调用它来替换占位符或应用自定义格式规则。此技术还支持复杂格式化场景中的自定义格式。

在这里，我们创建了一个名为“formatString”的新自定义格式函数，该函数接受“string”和“params”（参数数组）作为参数。

在函数体中，我们调用了“replace()”方法，并使用正则表达式将占位符“{0}, {1}”替换为参数数组中的相应值。

代码

function formatString(string, params) {
  return string.replace(/{(\d+)}/g, (match, index) => {
    return typeof params[index] !== 'undefined' ? params[index] : match;
  });
}
var name = "Alex";
var age = 30;
var formattedMsg = formatString("Hi, {0}! You are {1} years old.", [name, age]);
console.log(formattedMsg); 

输出

Hi, Alex! You are 30 years old.

方法 8：在 JavaScript 中使用三元运算符格式化字符串

JavaScript 三元运算符是用于字符串的条件表达式的简写方式。但是，它也可以通过根据指定的布尔表达式有条件地选择两个值之一并返回字符串来用于字符串格式化。

语法

condition ? expressionIfTrue : expressionIfFalse

看看这个使用三元运算符将字符串格式化为字符串对象的示例代码。

代码

let name = "Jenny";
let isAdmin = true;
let msg = `Welcome ${name}${isAdmin ? ", you are an admin" : ""}`;
console.log(msg);

输出

Welcome Jenny, you are an admin

在这里，我们定义了两个变量“name”和“isAdmin”，它们的值分别为“Jenny”和“true”。

之后，我们利用三元运算符，如果可选参数“isAdmin”的值为 true，则有条件地将字符串“, you are an admin”添加到消息字符串中，如上所述。

JavaScript 字符串格式化方法比较

在这里，我们列出了上述 JavaScript 字符串格式化方法的优缺点

方法	优点	缺点
带反引号（`）的 {} 括号	• 易于使用。 • 代码简洁易读。	可能不适合更复杂的格式化要求。
“+” 运算符	易于理解。	对于更复杂的格式化要求可能效率不高。
自定义函数进行字符串格式化	提供很大的灵活性。	需要更多的编码工作。
连接运算符	简单且广泛支持。	对于复杂的字符串格式化来说很麻烦。
模板文字	• 支持多行字符串。 • 可读且直观的语法。	格式化选项的控制有限。
正则表达式	提供很大的灵活性。	与其他方法相比，实现和维护不同。
自定义函数	提供很大的灵活性。	需要额外的编码来创建和维护自定义函数。
三元运算符	处理 null 或 undefined 值的简洁方法。	可能不适合更复杂的格式化要求。

请注意，方法的选择高度取决于具体用例和 JavaScript 代码的相关需求。

结论

在JavaScript中，您可以使用模板文字、三元运算符、“+”运算符、正则表达式和自定义函数来格式化字符串。这些字符串格式化方法允许开发人员以高效的方式操作和呈现文本数据。

因此，根据可读性、性能和浏览器兼容性选择正确的方法。它使开发人员能够改善用户体验并达到所需的格式化标准。