当前位置:首页 > JavaScript

js 实现format

2026-03-13 17:42:13JavaScript

JavaScript 实现字符串格式化

在 JavaScript 中实现字符串格式化可以通过多种方式完成,以下是几种常见的方法:

使用模板字符串(ES6)

模板字符串提供了一种简洁的字符串插值方式,支持多行字符串和表达式嵌入:

const name = 'Alice';
const age = 25;
const formatted = `Name: ${name}, Age: ${age}`;
console.log(formatted); // "Name: Alice, Age: 25"

使用 String.prototype.replace()

通过正则表达式匹配占位符并替换:

function format(str, values) {
    return str.replace(/{(\w+)}/g, (match, key) => values[key] || match);
}
const result = format('Name: {name}, Age: {age}', { name: 'Bob', age: 30 });
console.log(result); // "Name: Bob, Age: 30"

使用 printf-style 库(如 sprintf-js)

第三方库提供类似 C 语言的格式化功能:

import { sprintf } from 'sprintf-js';
const formatted = sprintf('Name: %s, Age: %d', 'Charlie', 35);
console.log(formatted); // "Name: Charlie, Age: 35"

自定义格式化函数

实现一个支持位置和命名参数的格式化工具:

function format(str, ...args) {
    let i = 0;
    return str.replace(/%s|%d|%\{(\w+)\}/g, (match, key) => {
        if (match === '%s' || match === '%d') return args[i++];
        return args[0][key] || match;
    });
}
console.log(format('%s is %d years old', 'Dave', 40)); // "Dave is 40 years old"
console.log(format('%{name} is %{age} years old', { name: 'Eve', age: 45 })); // "Eve is 45 years old"

日期/数字格式化

对于特定类型的数据,可使用内置 API:

js 实现format

// 数字格式化
const num = 1234.567;
console.log(num.toFixed(2)); // "1234.57"

// 日期格式化
const date = new Date();
console.log(date.toLocaleDateString('en-US')); // "7/21/2023"

选择方法时应考虑浏览器兼容性、性能需求和使用场景。模板字符串是现代开发的首选方案,而库函数适合需要复杂格式化的场景。

标签: jsformat
分享给朋友:

相关文章

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现换肤

js实现换肤

使用CSS变量实现换肤 通过CSS变量可以轻松实现主题切换功能。CSS变量在根元素中定义,通过JavaScript动态修改这些变量值。 :root { --primary-color: #349…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。 &…