当前位置:首页 > JavaScript

js实现format

2026-04-06 05:28:33JavaScript

JavaScript 实现字符串格式化

在 JavaScript 中,可以通过多种方式实现类似 format 的字符串格式化功能。以下是几种常见的方法:

使用模板字符串(ES6)

ES6 引入了模板字符串,可以直接在字符串中嵌入变量:

js实现format

const name = 'Alice';
const age = 25;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // "My name is Alice and I am 25 years old."

使用 String.prototype.replace 方法

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

function format(str, ...args) {
    return str.replace(/{(\d+)}/g, (match, index) => {
        return typeof args[index] !== 'undefined' ? args[index] : match;
    });
}

const result = format('Hello {0}, your balance is {1}', 'Alice', 100);
console.log(result); // "Hello Alice, your balance is 100"

使用对象替换占位符

支持命名占位符:

js实现format

function format(str, obj) {
    return str.replace(/\{([^}]+)\}/g, (match, key) => {
        return obj[key] || match;
    });
}

const result = format('Hello {name}, your balance is {balance}', {
    name: 'Alice',
    balance: 100
});
console.log(result); // "Hello Alice, your balance is 100"

使用 sprintf-js

如果需要更复杂的格式化功能,可以使用第三方库如 sprintf-js

const sprintf = require('sprintf-js').sprintf;
const result = sprintf('Hello %s, your balance is %d', 'Alice', 100);
console.log(result); // "Hello Alice, your balance is 100"

自定义格式化函数

结合日期、数字等格式化需求:

function formatDate(date) {
    return date.toISOString().split('T')[0];
}

const today = new Date();
const message = `Today is ${formatDate(today)}`;
console.log(message); // "Today is 2023-10-01"

以上方法可以根据具体需求选择使用,模板字符串是最简单的方式,而自定义函数或库可以满足更复杂的需求。

标签: jsformat
分享给朋友:

相关文章

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现交换

js实现交换

交换变量的方法 在JavaScript中,交换两个变量的值有多种方法。以下是常见的几种实现方式: 使用临时变量 通过引入一个临时变量来存储其中一个变量的值,实现交换: let a = 1; le…

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

节流js实现

节流js实现

节流(Throttle)的实现原理 节流是一种限制函数执行频率的技术,确保函数在一定时间间隔内最多执行一次。适用于高频触发事件(如滚动、输入、窗口调整等)的场景。 基础实现方式 使用时间戳判断是否执…