JS中的StringFormatter函数

JS中有时需要进行参数拼接,但是双引号和单引号的交叉使用,往往会引起不必要的麻烦,使用StringFormatter函数可以很好的解决这一点。自定义函数如下:


        String.prototype.format = String.prototype.f = function () {
            var s = this,
                i = arguments.length;

            while (i--) {
                s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
            }
            return s;
        };

使用方式(这里以给数据网格添加播放按钮为例:)

 var play = '<button id="playButton{0}" class="easyui-linkbutton" href="javascript:void(0)" onclick="self.parent.addTab(\'{1}\',\'${pageContext.request.contextPath}/video/playVideo.action?videoId={2}&videoName={3}\')">播放</button>'.format(
                index,
                videoName_,
                row.videoId,
                row.videoName
            );
### JavaScript 中 Formatter 的使用方法与示例 在 JavaScript 中,`formatter` 是一个常用的配置项,主要用于格式化数据或文本。它通常出现在可视化库(如 ECharts)、SQL 格式化工具(如 sql-formatter)以及代码格式化工具(如 Prettier)中。以下是 `formatter` 在不同场景下的用法和语法。 #### 1. ECharts 中的 Formatter 使用 ECharts 提供了强大的自定义功能,其中 `formatter` 可用于图例、提示框等组件的自定义显示内容。以下是一个饼图中使用 `formatter` 拼接百分比的示例: ```javascript option = { legend: { orient: 'vertical', left: 'left', formatter: function (name) { const total = data.reduce((sum, item) => sum + item.value, 0); const target = data.find(item => item.name === name); const percent = ((target.value / total) * 100).toFixed(1); return `${name} (${percent}%)`; }[^1] }, series: [ { type: 'pie', radius: ['50%', '70%'], data: data, label: { formatter: '{b}: {c} ({d}%)' // 显示名称、值和百分比 } } ] }; ``` #### 2. SQL Formatter 的使用 在前端 Vue 项目中,`sql-formatter` 结合 CodeMirror 或其他编辑器可以实现 SQL 代码的格式化功能。以下是一个完整的 Vue 组件示例: ```javascript <template> <div> <SqlEditor ref="sqleditor" :value="basicInfoForm.sqlMain" @changeTextarea="changeTextarea($event)" /> <el-button type="primary" size="small" class="sql-btn" @click="formaterSql(basicInfoForm.sqlMain)">格式化 SQL</el-button> </div> </template> <script> import sqlFormatter from 'sql-formatter'; import SqlEditor from '@/components/SqlEditor'; export default { components: { SqlEditor }, data() { return { basicInfoForm: { sqlMain: '' } }; }, methods: { changeTextarea(val) { this.$set(this.basicInfoForm, 'sqlMain', val); }, formaterSql(val) { const dom = this.$refs.sqleditor; dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()));[^2] } } }; </script> ``` #### 3. Prettier 配置中的 Formatter 使用 Prettier 是一种流行的代码格式化工具,支持多种语言的代码格式化。通过配置文件,可以自定义格式化规则。以下是一个典型的 Prettier 配置示例: ```json { "printWidth": 100, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "all", "arrowParens": "avoid" } ``` 在实际使用中,可以通过 CLI 或编辑器插件调用 Prettier 对代码进行格式化[^3]。 #### 4. 自定义 Formatter 函数 除了上述库提供的 `formatter` 功能外,还可以编写自定义的格式化函数。例如,将日期格式化为特定样式: ```javascript function formatDate(date) { const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } const now = new Date(); console.log(formatDate(now)); // 输出类似 "2023-10-05" ``` --- ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值