JS格式化字符串的两种方法(反引号与String.prototype)

 更新时间:2023年06月19日 12:36:30   作者:COCO56(徐可可)  
本文一共介绍了两种实现方式,使用反引号或自定义方法实现,需要的朋友可以参考下

本文一共介绍了两种实现方式:

1. 使用反引号实现(推荐)

ES6 模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

语法格式:

`想要输出的字符串……${变量名称}想要输出的字符串……${变量名称}`

应用实例:

 <script>
        window.onload = function() {
            var name = "徐可可";
            var age = 25;
            var sex = "男";
            console.log(`大家好,我叫${name},性别${sex},今年${age}岁了`);
        }
 </script>

2. 自定义方法实现

String.prototype 属性表示 String原型对象。所有 String 的实例都继承自 String.prototype. 任何String.prototype上的改变都会影响到所有的 String 实例。js扩展String.prototype.format字符串拼接的功能,首先是基础功能的改造:

String.prototype.format = function(){
  if(arguments.length==0){
    return this;
  }
  for(var s=this, i=0; i<arguments.length; i++){
    s = s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);
  }
  return s;
};

然后就是调用了:

//方式1
var test = '我的{0}是{1}';
var result = test.format('ID','coco56');
//方式2
var test = '我的{description}是{name}';
var result = test.format({description:'ID',name:'coco56'});

下面是其它网友的补充

格式化字符串

使用的replace不适合多个重复

<!-- lang: js -->
String.prototype.format = function(args) {
    var result = this;
    if (arguments.length < 1) {
        return result;
    }
    var data = arguments;		//如果模板参数是数组
    if (arguments.length == 1 && typeof (args) == "object") {
        //如果模板参数是对象
        data = args;
    }
    for (var key in data) {
        var value = data[key];
        if (undefined != value) {
            result = result.replace("{" + key + "}", value);
        }
}
    return result;
}

版本2 使用了replaceAll

<!-- lang: js -->
/**
 * 替换所有匹配exp的字符串为指定字符串
 * @param exp 被替换部分的正则
 * @param newStr 替换成的字符串
 */
String.prototype.replaceAll = function (exp, newStr) {
	return this.replace(new RegExp(exp, "gm"), newStr);
};
/**
 * 原型:字符串格式化
 * @param args 格式化参数值
 */
String.prototype.format = function(args) {
	var result = this;
	if (arguments.length < 1) {
		return result;
	}
	var data = arguments; // 如果模板参数是数组
	if (arguments.length == 1 && typeof (args) == "object") {
		// 如果模板参数是对象
		data = args;
	}
	for ( var key in data) {
		var value = data[key];
		if (undefined != value) {
			result = result.replaceAll("\\{" + key + "\\}", value);
		}
	}
	return result;
}

使用方法:

<!-- lang: js -->
//两种调用方式
var template1="我是{0},今年{1}了";
var result1=template1.format("loogn",22);
var template2="我是{name},今年{age}了";
var result2=template2.format({name:"loogn",age:22});
//两个结果都是"我是loogn,今年22了"

对于版本2使用了正则表达式(replaceaAll),意味着当文本中出现多个替换位时,都可以被替换。 var template1=“我是{0},今年{1}了, lucy今年也{1}了”; var

//结果是"我是loogn,今年22了, lucy今年也22了"

到此这篇关于JS格式化字符串的两种方法(反引号与String.prototype)的文章就介绍到这了,更多相关JS格式化字符串内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS开发自己的类库实例分析

    JS开发自己的类库实例分析

    这篇文章主要介绍了JS开发自己的类库,结合实例形式分析了javascript开发类库的原理、组成及实现方法,需要的朋友可以参考下
    2019-08-08
  • javascript删除数组重复元素的方法汇总

    javascript删除数组重复元素的方法汇总

    这篇文章主要介绍了javascript删除数组重复元素的方法,实例汇总了几种常用的javascript删除数组重复元素的技巧,需要的朋友可以参考下
    2015-06-06
  • JsRender实用入门教程

    JsRender实用入门教程

    这篇文章主要介绍了JsRender实用入门实例,包含了tag else使用、循环嵌套访问父级数据等知识点,并提供了完整的实例下载,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • js实现小星星游戏

    js实现小星星游戏

    这篇文章主要为大家详细介绍了js实现小星星游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 基于javascript实现移动端轮播图效果

    基于javascript实现移动端轮播图效果

    这篇文章主要为大家详细介绍了基于javascript实现移动端轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 前端常用6种数据加密方式的使用详细讲解

    前端常用6种数据加密方式的使用详细讲解

    在前端开发中,常用的数据加密技术包括Base64编码、MD5哈希、SHA-256哈希、AES对称加密、RSA非对称加密和HMAC消息认证码,这些加密方式提供了不同层次的数据安全保护,适用于不同的安全需求和场景,需要的朋友可以参考下
    2024-09-09
  • webpack与SPA实践之管理CSS等资源的方法

    webpack与SPA实践之管理CSS等资源的方法

    本篇文章主要介绍了webpack与SPA实践之管理CSS等资源的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Javascript Bootstrap的网格系统,导航栏和轮播详解

    Javascript Bootstrap的网格系统,导航栏和轮播详解

    这篇文章主要为大家介绍了Javascript Bootstrap的网格系统,导航栏和轮播,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 微信小程序实现上传多个文件 超过10个

    微信小程序实现上传多个文件 超过10个

    这篇文章主要为大家详细介绍了微信小程序实现上传多个文件,超过10个,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • H5实现中奖记录逐行滚动切换效果

    H5实现中奖记录逐行滚动切换效果

    这篇文章主要为大家详细介绍了H5实现中奖记录逐行滚动切换效果,利用定时器实现中奖记录逐行展示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论