jQuery显示页面数据保留两位小数点并格式化

其实思路很简单,把需要格式化的内容转为数字,再保留小数点就可以了。

直接贴上本地代码:

function parseFloatEle() {
        //举例具有table-number样式的元素是需要格式化的
	$(".table-number").each(function(){
		var eleV = parseFloat($(this).html());
		if (!isNaN(eleV)){
                        //这一步是小数两位以下的,不处理。如果要保持统一格式保留两位的话,不需要这一步
			var hasFloat = eleV.toString().split(".").length < 2 ? false : true;
			//数字格式化,每三位用逗号分隔
			var valueStr = eleV.toLocaleString();
			if (hasFloat){
				//$(this).html(eleV.toFixed(2).toString());
                                $(this).html(valueStr.split(".")[0] + "." + eleV.toFixed(2).toString().split(".")[1]);
			}else{
				$(this).html(valueStr);
			}
		}
	});
}

主要用到了JavaScript的三个函数

parseFloat(string)

isNaN(x)

NumberObject.toFixed(num)

NumberObject.toLocaleString([locales [, options]])

parseFloat 是全局函数,将字符串参数解析成为浮点数并返回(开头和结尾的空格是允许的)。

如果在解析过程中遇到了正负号(+ 或 -)、数字 (0-9)、小数点,或者科学记数法中的指数(e 或 E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数。同时参数字符串首位的空白符会被忽略。

如果参数字符串的第一个字符不能被解析成为数字,则 parseFloat 返回 NaN。

isNaN 函数用于检查其参数是否是非数字值(如果把 NaN 与任何值(包括其自身)相比得到的结果均是 false)。

 如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。

toFixed 方法可把 Number 四舍五入为指定小数位数的数字(该数字会被舍入,也可以用 0 补足,以便它达到指定的长度)。

规定小数的位数num,是 0 ~ 20 之间的值,包括 0 和 20,有些实现可以支持更大的数值范围。如果省略了该参数,将用 0 代替。

当调用该方法的对象不是 Number 时抛出 TypeError 异常,所以要注意调用环境和条件。

toLocaleString 把对象转换为本地格式的字符串。

调用对象可以是数字,日期,数组类型等。

NumberObject.toLocaleString([locales [, options]]) 的具体使用参数可以参考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_Compatibility

以下贴一部分源码:

interface Number {
    /**
     * Converts a number to a string by using the current or specified locale.
     * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
     * @param options An object that contains one or more properties that specify comparison options.
     */
    toLocaleString(locales?: string | string[], options?: Intl.NumberFormatOptions): string;
}

interface Date {
    /**
     * Converts a date and time to a string by using the current or specified locale.
     * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
     * @param options An object that contains one or more properties that specify comparison options.
     */
    toLocaleString(locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
    /**
     * Converts a date to a string by using the current or specified locale.
     * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
     * @param options An object that contains one or more properties that specify comparison options.
     */
    toLocaleDateString(locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;

    /**
     * Converts a time to a string by using the current or specified locale.
     * @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used.
     * @param options An object that contains one or more properties that specify comparison options.
     */
    toLocaleTimeString(locales?: string | string[], options?: Intl.DateTimeFormatOptions): string;
}

猜你喜欢

转载自blog.csdn.net/aleefang/article/details/113850864