Table of Contents
使用方法
Home Web Front-end JS Tutorial Example of custom format formatted output in js

Example of custom format formatted output in js

Mar 10, 2018 pm 03:28 PM
format javascript format

在使用js的时候,经常要进行字符串的拼接,一但使用+号进行字符串拼接的时候,基本是各种问题,又不好维护,有没有更好的方法地其进行格式化输出呢?答案肯定是有的,如果你使用nodejs,它已经自带的,如果你还在使用纯原生js,那不好意思了。

使用方法

String对象添加format方法

1

2

3

4

5

6

7

8

9

10

11

12

13

String.prototype.format = function(opts) {//use 'my name is ${name}'.format({name:'lake'})

    var data = Array.prototype.slice.call(arguments, 0),

        toString = Object.prototype.toString;    if (data.length) {

        data = data.length == 1 ?

            (opts !== null && (/\[object Array\]|\[object Object\]/.test(toString.call(opts))) ? opts : data) : data;        return this.replace(/\$\{(.+?)\}/g, function(match, key) {

            var replacer = data[key];            // chrome 下 typeof /a/ == 'function'

 

            if ('[object Function]' == toString.call(replacer)) {

                replacer = replacer(key);

            }            return ('undefined' == typeof replacer ? '' : replacer);

        });

    }    return this;

}

Copy after login
Copy after login

使用方法

1

console.log('my name is ${name}.'.format({name:'lake'}))

Copy after login
Copy after login
  • 1

输出结果

1

my name is lake.

Copy after login
Copy after login

权声明:多一份转载,多一份环保 http://blog.csdn.net/dounine/article/details/78443487

在使用js的时候,经常要进行字符串的拼接,一但使用+号进行字符串拼接的时候,基本是各种问题,又不好维护,有没有更好的方法地其进行格式化输出呢?答案肯定是有的,如果你使用nodejs,它已经自带的,如果你还在使用纯原生js,那不好意思了。

使用方法

String对象添加format方法

1

2

3

4

5

6

7

8

9

10

11

12

13

String.prototype.format = function(opts) {//use 'my name is ${name}'.format({name:'lake'})

    var data = Array.prototype.slice.call(arguments, 0),

        toString = Object.prototype.toString;    if (data.length) {

        data = data.length == 1 ?

            (opts !== null && (/\[object Array\]|\[object Object\]/.test(toString.call(opts))) ? opts : data) : data;        return this.replace(/\$\{(.+?)\}/g, function(match, key) {

            var replacer = data[key];            // chrome 下 typeof /a/ == 'function'

 

            if ('[object Function]' == toString.call(replacer)) {

                replacer = replacer(key);

            }            return ('undefined' == typeof replacer ? '' : replacer);

        });

    }    return this;

}

Copy after login
Copy after login

使用方法

1

console.log('my name is ${name}.'.format({name:'lake'}))

Copy after login
Copy after login

输出结果

1

my name is lake.

Copy after login
Copy after login

相关推荐:

php阅读number_format函数的源码分享

推荐10篇关于format函数的课程

详解str.format()的基本语法和高级用法

The above is the detailed content of Example of custom format formatted output in js. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to format c drive with dos command How to format c drive with dos command Feb 19, 2024 pm 04:23 PM

DOS command is a command line tool used in Windows operating system, which can be used to perform various system management tasks and operations. One of the common tasks is to format the hard drive, including the C drive. Formatting the C drive is a relatively dangerous operation because it will erase all data on the C drive and reinitialize the file system. Before performing this operation, make sure you have backed up important files and have a clear understanding of the impact that formatting will have on your computer. The following is formatted in the DOS command line

Computer formatting tutorial Computer formatting tutorial Jan 08, 2024 am 08:21 AM

Many times when using a computer, you will encounter too much garbage, but many users still don’t know how to format the computer. It doesn’t matter. Here is a tutorial on computer formatting for you to take a look at. How to format a computer: 1. Right-click "This PC" on the desktop and click "Manage". 2. Click "Storage" in "Computer Management" to open "Disk Management". 3. Select the hard drive you want to clean, right-click and select "Format". 4. Check "Perform Quick Format" and click "OK" to start formatting.

Will formatting a laptop make it faster? Will formatting a laptop make it faster? Feb 12, 2024 pm 11:54 PM

Will formatting a laptop make it faster? If you want to format your Windows laptop but want to know if it will make it faster, this article will help you know the right answer to this question. Will formatting a laptop make it faster? There are many reasons why users format their Windows laptops. But the most common reason is slow performance or speed of your laptop. Formatting a laptop will completely delete all data stored on the C drive or the hard drive partition where Windows operating system is installed. Therefore, every user will think twice before taking this step, especially when it comes to the performance of the laptop. This article will help you understand whether formatting your laptop will speed it up. Formatting your laptop helps

Revealed secrets of cell phone format recovery methods (mobile phone malfunction? Don't worry) Revealed secrets of cell phone format recovery methods (mobile phone malfunction? Don't worry) May 04, 2024 pm 06:01 PM

Nowadays, we will inevitably encounter some problems such as being unable to turn on the phone or lagging, such as system crash, but during use, mobile phones have become an indispensable part of our lives. We are often at a loss, and sometimes, there are no solutions to these problems. To help you solve cell phone problems, this article will introduce you to some methods of cell phone format recovery and restore your phone to normal operation. Back up data - protect important information, such as photos and contacts, from being lost during the formatting process. Before formatting your phone, the first thing to consider is to back up important data and files on your phone. To ensure data security, or choose to transfer files to a cloud storage service, you can back it up by connecting to a computer. Use the system's built-in recovery function - simple

Simple and effective steps to resolve 0x80070057 error Simple and effective steps to resolve 0x80070057 error Dec 27, 2023 am 08:38 AM

How to solve 0x80070057 error: simple and effective methods and steps Introduction: In the process of using the computer, we sometimes encounter various error codes. Among them, 0x80070057 is a very common error code, which is usually related to Windows operating system. This error code can appear in different situations, such as when installing or updating the operating system, backing up or restoring files, formatting drives, etc. Although this error code is frustrating, it's not unsolvable. This article will introduce

What are the methods of html formatting? What are the methods of html formatting? Mar 08, 2024 am 09:53 AM

HTML formatting method: 1. Use online HTML formatting tools; 2. Use the HTML formatting shortcut keys that come with the code editor, such as Shift + Alt + F in Visual Studio Code; 3. Use plug-ins, such as Sublime Text HTML/CSS/JS Prettify plug-in; 4. Use command line tools, such as HTML Tidy; 5. Manual formatting according to coding standards and habits.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Use shortcut keys in Eclipse to easily complete code formatting Use shortcut keys in Eclipse to easily complete code formatting Jan 03, 2024 am 09:59 AM

Eclipse is a very popular Java integrated development environment (IntegratedDevelopmentEnvironment, IDE). It provides many functions and shortcut keys to facilitate developers to improve efficiency. One of the commonly used functions is code formatting. This article will introduce the formatting shortcut key in Eclipse and how to use it. In Eclipse, code formatting is a very important operation. By formatting your code, you can make it

See all articles