JavaScript เทียบเท่ากับ printf / String.Format


1970

ฉันกำลังมองหา JavaScript ที่เทียบเท่า C / PHP printf()หรือ C # / Java โปรแกรมเมอร์String.Format()( IFormatProviderสำหรับ. NET)

ความต้องการพื้นฐานของฉันคือรูปแบบตัวคั่นพันสำหรับตัวเลขในตอนนี้ แต่สิ่งที่จัดการชุดค่าผสมจำนวนมาก (รวมถึงวันที่) จะดี

ฉันทราบว่าไลบรารีAjaxของ Microsoft มีเวอร์ชันString.Format()ให้ แต่เราไม่ต้องการให้ค่าใช้จ่ายทั้งหมดของกรอบงานนั้น


2
นอกเหนือจากคำตอบที่ดีทั้งหมดด้านล่างคุณอาจต้องการดูที่นี่: stackoverflow.com/a/2648463/1712065ซึ่ง IMO เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการแก้ไขปัญหานี้
แอนนี่

1
ฉันเขียนหนึ่งที่ราคาถูกที่ใช้ไวยากรณ์ printf เหมือน C
Braden ที่ดีที่สุด

var search = [$ scope.dog, "1"]; var url = vsprintf (" earth / Services / dogSearch.svc / FindMe /% s /% s ", การค้นหา); *** สำหรับโหนดคุณสามารถรับโมดูลได้โดย "npm install sprintf-js"
Jenna Leaf

ฉันได้เขียนฟังก์ชันง่าย ๆ เพื่อให้บรรลุสิ่งนี้ stackoverflow.com/a/54345052/5927126
AnandShanbhag

คำตอบ:


1109

จาก ES6 ในคุณสามารถใช้สตริงแม่แบบ:

let soMany = 10;
console.log(`This is ${soMany} times easier!`);
// "This is 10 times easier!

ดูคำตอบของคิมด้านล่างเพื่อดูรายละเอียด


มิฉะนั้น:

ลองsprintf () เพื่อ JavaScript


หากคุณต้องการทำวิธีการจัดรูปแบบง่าย ๆ ด้วยตัวคุณเองอย่าทำการทดแทนอย่างต่อเนื่อง แต่ทำพร้อมกัน

เนื่องจากข้อเสนออื่น ๆ ส่วนใหญ่ที่กล่าวถึงล้มเหลวเมื่อสตริงแทนที่ของการแทนที่ก่อนหน้านี้ยังมีลำดับการจัดรูปแบบดังนี้:

"{0}{1}".format("{1}", "{0}")

ปกติคุณจะคาดหวังที่จะออกแต่การส่งออกที่เกิดขึ้นจริง{1}{0} {1}{1}ดังนั้นการเปลี่ยนพร้อมกันแทนเช่นเดียวกับในข้อเสนอแนะของ fearphage


16
หากต้องการการแปลงตัวเลขเป็นสตริงอย่างง่ายบางnum.toFixed()วิธีอาจจะเพียงพอ!
heltonbiker

@ MaksymilianMajer ที่ดูเหมือนจะเป็นสิ่งที่แตกต่างอย่างมาก
Evan Carroll

@EvanCarroll คุณพูดถูก ในขณะที่ฉันเขียนความคิดเห็นที่เก็บของsprintf() for JavaScriptไม่พร้อมใช้งาน underscore.stringมีคุณสมบัติเพิ่มเติมนอกเหนือจาก sprintf ซึ่งเป็นไปตามsprintf() for JavaScriptการนำไปใช้ นอกเหนือจากนั้นห้องสมุดเป็นโครงการที่แตกต่างอย่างสิ้นเชิง
Maksymilian Majer

@MaksymilianMajer ถูกต้องเพียงแค่พูดว่าคำตอบนี้ตายไปแล้วและลิงก์ก็สลายไป มันต้องกำจัดให้หมด
Evan Carroll

2
คำตอบนี้ไม่ควรได้รับการยอมรับอีกต่อไป ในฐานะของ ES6 นี้ถูกสร้างขึ้นในภาษาจาวาสคริปต์ (ทั้งในเบราว์เซอร์และ NodeJS) ดูคำตอบของ @Kim ด้านล่าง
Ryan Shillington

1390

การสร้างโซลูชันที่แนะนำก่อนหน้านี้:

// First, checks if it isn't implemented yet.
if (!String.prototype.format) {
  String.prototype.format = function() {
    var args = arguments;
    return this.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number]
        : match
      ;
    });
  };
}

"{0} is dead, but {1} is alive! {0} {2}".format("ASP", "ASP.NET")

เอาท์พุท

ASP นั้นตายแล้ว แต่ ASP.NET ยังมีชีวิตอยู่! ASP {2}


หากคุณไม่ต้องการแก้ไขStringต้นแบบของ:

if (!String.format) {
  String.format = function(format) {
    var args = Array.prototype.slice.call(arguments, 1);
    return format.replace(/{(\d+)}/g, function(match, number) { 
      return typeof args[number] != 'undefined'
        ? args[number] 
        : match
      ;
    });
  };
}

ช่วยให้คุณคุ้นเคยมากขึ้น:

String.format('{0} is dead, but {1} is alive! {0} {2}', 'ASP', 'ASP.NET');

ด้วยผลลัพธ์เดียวกัน:

ASP นั้นตายแล้ว แต่ ASP.NET ยังมีชีวิตอยู่! ASP {2}


12
| | | เคล็ดลับไม่ทำงานหาก args [number] เป็น 0 ควรทำอย่างชัดเจนถ้า () เพื่อดูว่า (args [number] === ไม่ได้กำหนด)
fserb

4
ในคำสั่งอื่นของชวเลขถ้าทำไมไม่เพียงแค่ "จับคู่" แทน "'{' + number + '}'" การจับคู่ควรเท่ากับสตริงนั้น
mikeycgto

4
หากคุณมีหลายสตริงต่อท้ายกัน (ด้วย+-operator) ต้องแน่ใจว่าใส่สตริงที่สมบูรณ์ในวงเล็บ: ("asd {0}"+"fas {1}").format("first", "second");มิฉะนั้นฟังก์ชันจะใช้กับสตริงสุดท้ายที่ต่อท้ายเท่านั้น
Lukas Knuth

3
นั่นเป็นการเปลี่ยนแปลงผลลัพธ์เล็กน้อยและอย่างละเอียด 'foo {0}'.format(fnWithNoReturnValue())จินตนาการ foo {0}มันกำลังจะกลับมา foo undefinedกับการเปลี่ยนแปลงของคุณก็จะกลับมา
fearphage

2
@avenmore: / \ {(\ d +) \} / g
Hozuki

491

มันตลกเพราะกองมากเกินจริงมีฟังก์ชั่นการจัดรูปแบบของตัวเองสำหรับต้นแบบที่เรียกว่าString formatUnicornลองมัน! ไปที่คอนโซลแล้วพิมพ์ดังนี้:

"Hello, {name}, are you feeling {adjective}?".formatUnicorn({name:"Gabriel", adjective: "OK"});

Firebug

คุณได้รับผลลัพธ์นี้:

Hello, Gabriel, are you feeling OK?

คุณสามารถใช้วัตถุอาร์เรย์และสตริงเป็นอาร์กิวเมนต์! ฉันได้รับรหัสและทำใหม่เพื่อผลิตเวอร์ชันใหม่ของString.prototype.format:

String.prototype.formatUnicorn = String.prototype.formatUnicorn ||
function () {
    "use strict";
    var str = this.toString();
    if (arguments.length) {
        var t = typeof arguments[0];
        var key;
        var args = ("string" === t || "number" === t) ?
            Array.prototype.slice.call(arguments)
            : arguments[0];

        for (key in args) {
            str = str.replace(new RegExp("\\{" + key + "\\}", "gi"), args[key]);
        }
    }

    return str;
};

สังเกตการArray.prototype.slice.call(arguments)โทรที่ฉลาด- ซึ่งหมายความว่าถ้าคุณโยนอาร์กิวเมนต์ที่เป็นสตริงหรือตัวเลขไม่ใช่วัตถุสไตล์ JSON เดียวคุณจะได้รับString.Formatพฤติกรรมของ C #

"a{0}bcd{1}ef".formatUnicorn("foo", "bar"); // yields "aFOObcdBARef"

นั่นเป็นเพราะArray's sliceจะบังคับให้สิ่งที่อยู่ในargumentsเป็นArrayไม่ว่าจะเดิมหรือไม่และkeyจะเป็นดัชนี (0, 1, 2 ... ) ของแต่ละองค์ประกอบอาร์เรย์ข่มขู่เป็นสตริง (เช่น '0' ดังนั้น"\\{0\\}"สำหรับรูปแบบ regexp แรกของคุณ)

เรียบร้อย


402
มันเย็นสวยที่จะตอบคำถามใน StackOverflow ที่มีรหัสจาก StackOverflow +1
Sneakyness

5
@JamesManning regex อนุญาตให้ใช้การตั้งค่าสถานะส่วนกลาง ( g) ซึ่งสามารถแทนที่คีย์เดียวกันมากกว่าหนึ่งครั้ง ในตัวอย่างข้างต้นคุณสามารถใช้{name}หลายครั้งในประโยคเดียวกันและให้แทนที่ทั้งหมด
KrekkieD

3
ดูเหมือนจะเปราะบางอย่างยิ่งที่จะซื่อสัตย์ จะเกิดอะไรขึ้นถ้าnameเป็นเช่นนั้น"blah {adjective} blah"?
sam hocevar

5
@ รัฟฟิน“ เกินความจริงเล็กน้อย”? รหัสที่หลงกลในการตีความข้อมูลของผู้ใช้เป็นสตริงรูปแบบเป็นทั้งหมวดหมู่ของช่องโหว่ 98.44% เป็นเกินปานกลาง
sam hocevar

3
@ Samhocevar ฉันไม่อยากจะเชื่อเลยว่าเจ้า Little Bobby ทำให้ฉันเชื่อง ;) หากคุณกำลังเรียกใช้ข้อความที่ประมวลผลโดย JavaScript ฝั่งไคลเอ็นต์บนเซิร์ฟเวอร์ฐานข้อมูลของคุณโดยไม่มีการตรวจสอบความปลอดภัยสวรรค์ช่วยเราทุกคน ; ^) ดูไม่ควรมีสิ่งใดที่ผู้ใช้สามารถส่งจากลูกค้า (เช่นบุรุษไปรษณีย์) ที่ผ่านการรักษาความปลอดภัยของเซิร์ฟเวอร์ของคุณ และคุณควรถือว่าสิ่งที่เป็นอันตรายที่อาจส่งมาจากลูกค้าจะเป็น นั่นคือถ้าคุณต้องการความปลอดภัย 100% จากฝั่งไคลเอ็นต์โค้ด JavaScriptซึ่งเป็นเสมอที่สามารถแก้ไขได้ใช้งานและคุณคิดว่าฟังก์ชั่นนี้สามารถเปิดเสี่ยงด้านความปลอดภัยที่คุณเล่นอยู่ในเกมที่ไม่ถูกต้อง
ruffin

325

การจัดรูปแบบตัวเลขใน JavaScript

ฉันมาที่หน้าคำถามนี้หวังที่จะหาวิธีจัดรูปแบบตัวเลขใน JavaScript โดยไม่ต้องแนะนำห้องสมุดอื่น นี่คือสิ่งที่ฉันได้พบ:

การปัดเศษตัวเลขทศนิยม

sprintf("%.2f", num)ดูเหมือนว่าเทียบเท่าใน JavaScript num.toFixed(2)ซึ่งnumจะจัดรูปแบบเป็นทศนิยม 2 ตำแหน่งโดยมีการปัดเศษ (แต่ดูความคิดเห็นของ @ ars265 เกี่ยวกับMath.roundด้านล่าง)

(12.345).toFixed(2); // returns "12.35" (rounding!)
(12.3).toFixed(2); // returns "12.30" (zero padding)

แบบฟอร์มเลขชี้กำลัง

เทียบเท่ามี sprintf("%.2e", num)num.toExponential(2)

(33333).toExponential(2); // "3.33e+4"

ฐานสิบหกและฐานอื่น ๆ

หากต้องการพิมพ์ตัวเลขในฐาน B, num.toString(B)ลอง JavaScript รองรับการแปลงอัตโนมัติไปยังและจากฐาน 2 ถึง 36 (นอกจากนี้เบราว์เซอร์บางตัวยังมีข้อ จำกัด ในการรองรับการเข้ารหัส base64 )

(3735928559).toString(16); // to base 16: "deadbeef"
parseInt("deadbeef", 16); // from base 16: 3735928559

หน้าอ้างอิง

บทช่วยสอนด่วนเกี่ยวกับการจัดรูปแบบหมายเลข JS

หน้าอ้างอิง Mozilla สำหรับ toFixed () (พร้อมลิงก์ไปยัง toPrecision (), toExponential (), toLocaleString (), ... )


23
มันจะดีกว่าหรือถ้าจะใส่ตัวเลขตามตัวอักษรในวงเล็บแทนที่จะปล่อยให้มีพื้นที่สีขาวแปลก ๆ
rmobis

7
นั่นอาจจะดูดีขึ้นจริง แต่เป้าหมายของฉันมีเพียงเพื่อชี้ให้เห็นกับดักข้อผิดพลาดทางไวยากรณ์
rescdsk

4
เพียงแค่บันทึกด้านข้างหากคุณใช้เบราว์เซอร์รุ่นเก่าหรือสนับสนุนเบราว์เซอร์รุ่นเก่าเบราว์เซอร์บางตัวที่นำไปใช้กับการแก้ไขอย่างไม่ถูกต้องโดยใช้ Math.round แทนการแก้ไขเป็นวิธีที่ดีกว่า
ars265

7
@Raphael_ และ @rescdsk: ..ใช้ได้เช่นกัน:33333..toExponential(2);
Peter Jaric

หรือ (33333) .to เอ็กซ์โปแนนเชียล (2)
Jonathan

245

จาก ES6 ในคุณสามารถใช้สตริงแม่แบบ :

let soMany = 10;
console.log(`This is ${soMany} times easier!`);
// "This is 10 times easier!

โปรดระวังว่าสตริงเทมเพลตถูกล้อมรอบด้วย backticks `แทนเครื่องหมายคำพูด (เดี่ยว)

สำหรับข้อมูลเพิ่มเติม:

https://developers.google.com/web/updates/2015/01/ES6-Template-Strings

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

หมายเหตุ: ตรวจสอบ mozilla-site เพื่อค้นหารายการเบราว์เซอร์ที่รองรับ


61
ปัญหาเกี่ยวกับสตริงแม่แบบคือดูเหมือนว่าพวกเขาจะถูกดำเนินการทันทีทำให้พวกเขาใช้เป็นตารางสตริงเหมือน i18n ไร้ค่าอย่างสมบูรณ์ ฉันไม่สามารถกำหนดสตริงได้ แต่เนิ่นๆและระบุพารามิเตอร์ที่จะใช้ในภายหลังและ / หรือซ้ำ ๆ
Tustin2121

4
@ Tustin2121 คุณพูดถูกว่าพวกมันไม่ได้ถูกสร้างขึ้นมาเพื่อกำหนดตัวแปรซึ่งเป็นความคิดที่แปรปรวนเล็กน้อย แต่มันง่ายพอที่จะทำงานกับแนวโน้มการดำเนินการทันทีของสายอักขระถ้าคุณซ่อนมันไว้ในฟังก์ชั่น ดูjsfiddle.net/zvcm70pa
inanutshellus

13
@ Tustin2121 ไม่มีความแตกต่างระหว่างการใช้สตริงแม่แบบหรือการเรียงต่อกันสตริงแบบเก่าน้ำตาลในสิ่งเดียวกัน คุณจะต้องตัดตัวสร้างสตริงแบบเก่าในฟังก์ชั่นที่เรียบง่ายและสิ่งเดียวกันทำงานได้ดีกับแม่แบบสตริง const compile = (x, y) => `I can call this template string whenever I want.. x=${x}, y=${y}`...compile(30, 20)
cchamberlain

4
วิธีการแก้ปัญหานี้จะไม่ทำงานสำหรับสตริงรูปแบบที่ส่งผ่านในตัวแปร (จากเซิร์ฟเวอร์ตัวอย่าง)
user993954

1
@inanutshellus ใช้งานได้ดีถ้าฟังก์ชันเทมเพลตของคุณถูกกำหนดไว้ในเครื่องเดียวกันกับที่มันทำงาน เท่าที่ฉันรู้คุณไม่สามารถผ่านฟังก์ชั่นเป็น JSON ดังนั้นการจัดเก็บฟังก์ชั่นเทมเพลตในฐานข้อมูลทำงานได้ไม่ดี
styfle

171

jsxt, Zippo

ตัวเลือกนี้เหมาะกว่า

String.prototype.format = function() {
    var formatted = this;
    for (var i = 0; i < arguments.length; i++) {
        var regexp = new RegExp('\\{'+i+'\\}', 'gi');
        formatted = formatted.replace(regexp, arguments[i]);
    }
    return formatted;
};

ด้วยตัวเลือกนี้ฉันสามารถแทนที่สตริงเช่นนี้

'The {0} is dead. Don\'t code {0}. Code {1} that is open source!'.format('ASP', 'PHP');

ด้วยรหัสของคุณจะไม่ถูกแทนที่ {0} ที่สอง ;)


3
gist.github.com/1049426ฉันอัปเดตตัวอย่างของคุณด้วยวิธีนี้ สิทธิประโยชน์มากมายรวมถึงการบันทึกการใช้งานดั้งเดิมหากมีอยู่การทำให้เป็นสตริง ฯลฯ ฉันพยายามลบนิพจน์ทั่วไป แต่ต้องการการแทนที่ทั่วโลก : - /
tbranyen

6
jsxt ได้รับอนุญาตจาก GPL โชคไม่ดี
AndiDog

109

ฉันใช้ฟังก์ชั่นง่าย ๆ นี้:

String.prototype.format = function() {
    var formatted = this;
    for( var arg in arguments ) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

นั่นคล้ายกับ string.format:

"{0} is dead, but {1} is alive!".format("ASP", "ASP.NET")

1
ทำไม+=เหรอformatted = this.replace("{" + arg + "}", arguments[arg]);
กุ้ยหลิน桂林

2
ฉันคิดว่ารหัสยังไม่ถูกต้อง หนึ่งที่ถูกต้องควรเป็นเช่นFilipizโพสต์
wenqiang

3
สำหรับการอ้างอิงfor...inจะไม่สามารถใช้งานได้ในทุกเบราว์เซอร์ตามที่รหัสนี้คาดไว้ มันจะวนลูปมากกว่าคุณสมบัติที่นับได้ทั้งหมดซึ่งในบางเบราว์เซอร์จะมีarguments.lengthและในที่อื่น ๆ จะไม่รวมถึงการขัดแย้งด้วยตัวเองเลย ไม่ว่าในกรณีใดถ้าObject.prototypeมีการเพิ่มสิ่งใด ๆ อาจจะรวมอยู่ในพวง รหัสควรจะใช้มาตรฐานห่วงมากกว่าfor for...in
cHao

3
สิ่งนี้จะล้มเหลวหากการแทนที่ก่อนหน้ามีสตริงรูปแบบเช่นกัน:"{0} is dead, but {1} is alive!".format("{1}", "ASP.NET") === "ASP.NET is dead, but ASP.NET is alive!"
Gumbo

6
ตัวแปรargคือโกลบอล คุณต้องทำสิ่งนี้แทน:for (var arg in arguments) {
Pauan

68

สำหรับผู้ใช้Node.jsนั้นมีutil.formatฟังก์ชั่นเหมือนพิมพ์:

util.format("%s world", "Hello")

1
สิ่งนี้ไม่รองรับ% x ณ โหนด v0.10.26
Max Krohn

ไม่สนับสนุนความกว้างและการจัดตำแหน่งการปรับเปลี่ยนอย่างใดอย่างหนึ่ง (เช่น%-20s %5.2f)
FGM

ฉันต้องเลื่อนลงไปจนสุดเพื่อดูคำตอบที่มีประโยชน์นี้
Donato

53

ฉันไม่แปลกใจเลยที่ไม่มีใครใช้reduceนี่เป็นฟังก์ชัน JavaScript ที่รัดกุมและมีประสิทธิภาพ

ES6 (EcmaScript2015)

String.prototype.format = function() {
  return [...arguments].reduce((p,c) => p.replace(/%s/,c), this);
};

console.log('Is that a %s or a %s?... No, it\'s %s!'.format('plane', 'bird', 'SOman'));

<ES6

function interpolate(theString, argumentArray) {
    var regex = /%s/;
    var _r=function(p,c){return p.replace(regex,c);}
    return argumentArray.reduce(_r, theString);
}

interpolate("%s, %s and %s", ["Me", "myself", "I"]); // "Me, myself and I"

มันทำงานอย่างไร:

ลดใช้ฟังก์ชั่นกับการสะสมและองค์ประกอบในอาร์เรย์ (จากซ้ายไปขวา) เพื่อลดมันให้เป็นค่าเดียว

var _r= function(p,c){return p.replace(/%s/,c)};

console.log(
  ["a", "b", "c"].reduce(_r, "[%s], [%s] and [%s]") + '\n',
  [1, 2, 3].reduce(_r, "%s+%s=%s") + '\n',
  ["cool", 1337, "stuff"].reduce(_r, "%s %s %s")
);


4
นี่คือรุ่นที่ใช้วิธีการนี้เพื่อสร้างprintfฟังก์ชั่นที่ง่ายขึ้น: jsfiddle.net/11szrbx9
Dem Pilafian

1
และนี่คืออีกอันหนึ่งที่ใช้ ES6 ในหนึ่งบรรทัด:(...a) => {return a.reduce((p: string, c: any) => p.replace(/%s/, c));
dtasev

ไม่จำเป็นต้องใช้String.prototype.formatใน ES6: ((a,b,c)=>`${a}, ${b} and ${c}`)(...['me', 'myself', 'I'])(โปรดทราบว่านี่เป็นเรื่องซ้ำซ้อนเล็กน้อยเพื่อให้เหมาะกับตัวอย่างของคุณมากขึ้น)
ติโน

คุณจะต้องใช้ฟังก์ชั่นการเปลี่ยนสำหรับตัวprintfระบุชนิดแต่ละตัวและรวมถึงตรรกะสำหรับคำนำหน้าการขยาย การวนซ้ำสตริงรูปแบบที่ดูสมเหตุสมผลน่าจะเป็นความท้าทายเล็กน้อยที่นี่ imho แก้ปัญหาเรียบร้อยหากคุณต้องการเปลี่ยนสตริง
collapsar

51

นี่คือน้อยที่สุดการดำเนินงานของ sprintf ใน JavaScript: มันเพียง แต่ "% s" และ "% d" แต่ฉันมีพื้นที่ว่างด้านซ้ายเพื่อให้มีการขยาย มันไม่มีประโยชน์กับ OP แต่คนอื่น ๆ ที่สะดุดกับหัวข้อนี้ที่มาจาก Google อาจได้รับประโยชน์จากมัน

function sprintf() {
    var args = arguments,
    string = args[0],
    i = 1;
    return string.replace(/%((%)|s|d)/g, function (m) {
        // m is the matched format, e.g. %s, %d
        var val = null;
        if (m[2]) {
            val = m[2];
        } else {
            val = args[i];
            // A switch statement so that the formatter can be extended. Default is %s
            switch (m) {
                case '%d':
                    val = parseFloat(val);
                    if (isNaN(val)) {
                        val = 0;
                    }
                    break;
            }
            i++;
        }
        return val;
    });
}

ตัวอย่าง:

alert(sprintf('Latitude: %s, Longitude: %s, Count: %d', 41.847, -87.661, 'two'));
// Expected output: Latitude: 41.847, Longitude: -87.661, Count: 0

ตรงกันข้ามกับโซลูชันที่คล้ายกันในการตอบกลับก่อนหน้าอันนี้จะทำการทดแทนทั้งหมดในครั้งเดียวดังนั้นมันจะไม่แทนที่ส่วนของค่าที่ถูกแทนที่ก่อนหน้านี้


31

โปรแกรมเมอร์ JavaScript สามารถใช้ String.prototype.sprintf ที่https://github.com/ildar-shaimordanov/jsxt/blob/master/js/String.js ด้านล่างเป็นตัวอย่าง:

var d = new Date();
var dateStr = '%02d:%02d:%02d'.sprintf(
    d.getHours(), 
    d.getMinutes(), 
    d.getSeconds());

@JasonMorgan ฉันได้แบ่งปันลิงก์การทำงานกับ GitHub ดูคำตอบที่แก้ไขแล้ว
jsxt

24

เมื่อเพิ่มzippoxerคำตอบฉันจะใช้ฟังก์ชั่นนี้:

String.prototype.format = function () {
    var a = this, b;
    for (b in arguments) {
        a = a.replace(/%[a-z]/, arguments[b]);
    }
    return a; // Make chainable
};

var s = 'Hello %s The magic number is %d.';
s.format('world!', 12); // Hello World! The magic number is 12.

ฉันยังมีรุ่นที่ไม่ใช่ต้นแบบซึ่งฉันใช้บ่อยขึ้นสำหรับไวยากรณ์เหมือน Java:

function format() {
    var a, b, c;
    a = arguments[0];
    b = [];
    for(c = 1; c < arguments.length; c++){
        b.push(arguments[c]);
    }
    for (c in b) {
        a = a.replace(/%[a-z]/, b[c]);
    }
    return a;
}
format('%d ducks, 55 %s', 12, 'cats'); // 12 ducks, 55 cats

อัพเดต ES 2015

สิ่งใหม่ ๆ ที่ยอดเยี่ยมทั้งหมดใน ES 2015 ทำให้ง่ายขึ้นมาก:

function format(fmt, ...args){
    return fmt
        .split("%%")
        .reduce((aggregate, chunk, i) =>
            aggregate + chunk + (args[i] || ""), "");
}

format("Hello %%! I ate %% apples today.", "World", 44);
// "Hello World, I ate 44 apples today."

%%ฉันคิดว่าตั้งแต่นี้เหมือนคนเก่าไม่จริงแยกตัวอักษรก็เช่นกันอาจจะเพียงแค่ใช้โทเค็นเดียว สิ่งนี้มีประโยชน์ในการมีความชัดเจนและไม่ทำให้ใช้งานได้ยากเพียง%อย่างเดียว อย่างไรก็ตามหากคุณต้องการ%%ด้วยเหตุผลบางอย่างคุณจะต้องแทนที่ด้วยตัวเอง:

format("I love percentage signs! %%", "%%");
// "I love percentage signs! %%"

3
คำตอบนี้ดีมากสำหรับการคัดลอกอย่างรวดเร็วลงในฟังก์ชั่นที่มีอยู่ ไม่ต้องมีการดาวน์โหลด ฯลฯ
Nick

@Nick yep, นั่นคือความคิด :)
Braden ที่ดีที่สุด

21

+1 Zippo โดยมีข้อยกเว้นว่าฟังก์ชั่นของร่างกายจะต้องเป็นด้านล่างหรือมิฉะนั้นจะผนวกสตริงปัจจุบันในทุก ๆ ซ้ำ:

String.prototype.format = function() {
    var formatted = this;
    for (var arg in arguments) {
        formatted = formatted.replace("{" + arg + "}", arguments[arg]);
    }
    return formatted;
};

1
มันไม่ทำงานบน Firefox การดีบักเกอร์แสดงเป็นไม่ได้กำหนด
xiao 啸

มันไม่ได้แทนที่ตัวอักษรที่สองผลที่จะกลายเป็น'The {0} is dead. Don\'t code {0}. Code {1} that is open source!'.format('ASP', 'PHP'); The ASP is dead. Don't code {0}. Code PHP that is open source!อีกสิ่งหนึ่งfor(arg in arguments)ไม่ทำงานใน IE ฉันแทนที่ด้วย for (arg = 0; arg <arguments.length; arg++)
samarjit samanta

2
สำหรับการอ้างอิงfor...inจะไม่สามารถใช้งานได้ในทุกเบราว์เซอร์ตามที่รหัสนี้คาดไว้ มันจะวนลูปมากกว่าคุณสมบัติที่นับได้ทั้งหมดซึ่งในบางเบราว์เซอร์จะมีarguments.lengthและในที่อื่น ๆ จะไม่รวมถึงการขัดแย้งด้วยตัวเองเลย ไม่ว่าในกรณีใดถ้าObject.prototypeมีการเพิ่มสิ่งใด ๆ อาจจะรวมอยู่ในพวง รหัสควรจะใช้มาตรฐานห่วงมากกว่าfor for...in
cHao

คุณควรเสนอการแก้ไขคำตอบแทนคำตอบที่ซ้ำกัน คำตอบนี้
RousseauAlexandre

19

ฉันต้องการแบ่งปันโซลูชันสำหรับ 'ปัญหา' ฉันไม่ได้คิดค้นวงล้อขึ้นใหม่ แต่พยายามค้นหาวิธีแก้ปัญหาตามสิ่งที่ JavaScript ทำไปแล้ว ข้อดีคือคุณจะได้รับการแปลงโดยนัยฟรี การตั้งค่าทรัพย์สินต้นแบบ $ ของ String ให้ไวยากรณ์ที่ดีและกะทัดรัด (ดูตัวอย่างด้านล่าง) อาจไม่ใช่วิธีที่มีประสิทธิภาพที่สุด แต่ในกรณีส่วนใหญ่เกี่ยวกับเอาต์พุตไม่จำเป็นต้องปรับให้เหมาะสมสุด

String.form = function(str, arr) {
    var i = -1;
    function callback(exp, p0, p1, p2, p3, p4) {
        if (exp=='%%') return '%';
        if (arr[++i]===undefined) return undefined;
        exp  = p2 ? parseInt(p2.substr(1)) : undefined;
        var base = p3 ? parseInt(p3.substr(1)) : undefined;
        var val;
        switch (p4) {
            case 's': val = arr[i]; break;
            case 'c': val = arr[i][0]; break;
            case 'f': val = parseFloat(arr[i]).toFixed(exp); break;
            case 'p': val = parseFloat(arr[i]).toPrecision(exp); break;
            case 'e': val = parseFloat(arr[i]).toExponential(exp); break;
            case 'x': val = parseInt(arr[i]).toString(base?base:16); break;
            case 'd': val = parseFloat(parseInt(arr[i], base?base:10).toPrecision(exp)).toFixed(0); break;
        }
        val = typeof(val)=='object' ? JSON.stringify(val) : val.toString(base);
        var sz = parseInt(p1); /* padding size */
        var ch = p1 && p1[0]=='0' ? '0' : ' '; /* isnull? */
        while (val.length<sz) val = p0 !== undefined ? val+ch : ch+val; /* isminus? */
       return val;
    }
    var regex = /%(-)?(0?[0-9]+)?([.][0-9]+)?([#][0-9]+)?([scfpexd%])/g;
    return str.replace(regex, callback);
}

String.prototype.$ = function() {
    return String.form(this, Array.prototype.slice.call(arguments));
}

นี่คือตัวอย่างบางส่วน:

String.format("%s %s", [ "This is a string", 11 ])
console.log("%s %s".$("This is a string", 11))
var arr = [ "12.3", 13.6 ]; console.log("Array: %s".$(arr));
var obj = { test:"test", id:12 }; console.log("Object: %s".$(obj));
console.log("%c", "Test");
console.log("%5d".$(12)); // '   12'
console.log("%05d".$(12)); // '00012'
console.log("%-5d".$(12)); // '12   '
console.log("%5.2d".$(123)); // '  120'
console.log("%5.2f".$(1.1)); // ' 1.10'
console.log("%10.2e".$(1.1)); // '   1.10e+0'
console.log("%5.3p".$(1.12345)); // ' 1.12'
console.log("%5x".$(45054)); // ' affe'
console.log("%20#2x".$("45054")); // '    1010111111111110'
console.log("%6#2d".$("111")); // '     7'
console.log("%6#16d".$("affe")); // ' 45054'

น่าเสียดายที่ # และ + ไม่ถูกนำไปใช้กับการลอย นี่คือการอ้างอิงสำหรับฟังก์ชั่นใน c: tutorialspoint.com/c_standard_library/c_function_sprintf.htm
แดเนียล

15

ฉันจะเพิ่มการค้นพบของตัวเองซึ่งฉันพบตั้งแต่ฉันถาม:

น่าเศร้าที่ดูเหมือนว่า sprintf ไม่ได้จัดการการจัดรูปแบบตัวคั่นหลักพันเหมือนกับรูปแบบสตริงของ. NET


14

ฉันใช้ไลบรารีขนาดเล็กชื่อString.format สำหรับ JavaScriptซึ่งรองรับความสามารถส่วนใหญ่ของสตริงรูปแบบ (รวมถึงรูปแบบของตัวเลขและวันที่) และใช้ไวยากรณ์ NET สคริปต์ตัวเองมีขนาดเล็กกว่า 4 kB ดังนั้นจึงไม่สร้างค่าใช้จ่ายมากนัก


ฉันดูห้องสมุดนั้นและมันก็ดูดีมาก ฉันโกรธเมื่อเห็นว่าการดาวน์โหลดนั้นเป็น EXE แล้วห่านั่นมันเกี่ยวกับอะไร? ไม่ได้ดาวน์โหลด
jessegavin

บ่อยครั้งที่ไฟล์เก็บถาวรที่ดาวน์โหลดได้ซึ่งเป็น EXE ไม่มีอะไรมากไปกว่า "ZIP แบบขยายตัวเอง" ดำเนินการและจะแกะตัวเองออก สิ่งนี้ค่อนข้างสะดวก แต่เพราะดูเหมือนมัลแวร์รูปแบบไม่ได้ใช้บนเว็บทั้งหมดที่มักจะมีอีกต่อไป
Chuck Kollars

แม้ว่าลิงก์นี้อาจตอบคำถามได้ดีกว่าหากรวมส่วนสำคัญของคำตอบไว้ที่นี่และให้ลิงก์สำหรับการอ้างอิง คำตอบสำหรับลิงค์เท่านั้นอาจไม่ถูกต้องหากหน้าเว็บที่เชื่อมโยงนั้นเปลี่ยนแปลง
starmole

@starmole การเชื่อมโยงไปยัง (minified) 4 กิโลไบต์จาวาสคริปต์ห้องสมุด ฉันไม่เชื่อว่าการวางลงในคำตอบเป็นความคิดที่ดี
ivarni

คุณกำลังวางมันจะไม่ดีกว่า ฉันเพิ่งได้รับความคิดเห็นนี้เพื่อตรวจสอบแบบสุ่ม - และแสดงความคิดเห็นก่อนที่จะไม่ชอบมัน สำหรับฉัน stackoverflow จะดีกว่าเมื่อให้คำอธิบายแทนที่จะเป็นโซลูชันสำเร็จรูป (ซึ่งเป็นลิงก์) ฉันไม่ต้องการให้คนอื่นโพสต์หรือดาวน์โหลดรหัสกล่องดำ
starmole

14

สง่างามมาก:

String.prototype.format = function (){
    var args = arguments;
    return this.replace(/\{\{|\}\}|\{(\d+)\}/g, function (curlyBrack, index) {
        return ((curlyBrack == "{{") ? "{" : ((curlyBrack == "}}") ? "}" : args[index]));
    });
};

// Usage:
"{0}{1}".format("{1}", "{0}")

เครดิตไปที่ (ลิงค์เสีย) https://gist.github.com/0i0/1519811


นี้เป็นเพียงคนเดียวที่จับหนีวงเล็บเช่นเดียวกับสิ่งที่ชอบ{{0}} {0}{1}.format("{1}", "{0}")ควรจะอยู่ด้านบนสุด!
Juan

11

หากคุณต้องการจัดการกับตัวคั่นหลักพันคุณควรใช้ toLocaleString () จากคลาสJavaScript Numberเนื่องจากจะจัดรูปแบบสตริงสำหรับภูมิภาคของผู้ใช้

ชั้นวันที่จาวาสคริปต์สามารถจัดรูปแบบวันที่และเวลาที่แปล


1
เป็นจริงชุดโดยผู้ใช้เป็นที่ตั้งในการประยุกต์ใช้ (ไม่ใช่เครื่องของพวกเขา) แต่ผมจะลองดูขอบคุณ
คริส S

เพิ่มตัวอย่างเพื่อให้ทุกคนสามารถเข้าใจได้อย่างรวดเร็ว
Bhushan Kawadkar

9

โครงการ PHPJSได้เขียนการใช้งานจาวาสคริหลายฟังก์ชั่นของ PHP ตั้งแต่ของ PHP sprintf()ฟังก์ชั่นเป็นพื้นเดียวกับซีprintf(), การใช้งานจาวาสคริของพวกเขาก็ควรจะตอบสนองความต้องการของคุณ


9

ฉันใช้อันนี้:

String.prototype.format = function() {
    var newStr = this, i = 0;
    while (/%s/.test(newStr))
        newStr = newStr.replace("%s", arguments[i++])

    return newStr;
}

จากนั้นฉันก็เรียกมันว่า:

"<h1>%s</h1><p>%s</p>".format("Header", "Just a test!");

9

ฉันมีวิธีแก้ปัญหาที่ใกล้กับ Peter มาก แต่มันเกี่ยวกับเรื่องจำนวนและวัตถุ

if (!String.prototype.format) {
  String.prototype.format = function() {
    var args;
    args = arguments;
    if (args.length === 1 && args[0] !== null && typeof args[0] === 'object') {
      args = args[0];
    }
    return this.replace(/{([^}]*)}/g, function(match, key) {
      return (typeof args[key] !== "undefined" ? args[key] : match);
    });
  };
}

บางทีมันอาจจะดีกว่าที่จะจัดการกับทุกกรณีที่ลึกลงไป แต่สำหรับความต้องการของฉันมันก็ใช้ได้

"This is an example from {name}".format({name:"Blaine"});
"This is an example from {0}".format("Blaine");

PS: ฟังก์ชั่นนี้ยอดเยี่ยมมากถ้าคุณใช้การแปลในกรอบแม่แบบเช่นAngularJS :

<h1> {{('hello-message'|translate).format(user)}} <h1>
<h1> {{('hello-by-name'|translate).format( user ? user.name : 'You' )}} <h1>

ตำแหน่งที่ en.json คล้ายกัน

{
    "hello-message": "Hello {name}, welcome.",
    "hello-by-name": "Hello {0}, welcome."
}

ส่วน [^}] ใน regexp นั้นไม่จำเป็น .. ใช้ {(. *?)} แทนหรือดีกว่า {([\ s \ S] *?)} เพื่อจับคู่ขึ้นบรรทัดใหม่ด้วย
rawiro

7

รุ่นที่แตกต่างกันเล็กน้อยหนึ่งรุ่นที่ฉันชอบ (อันนี้ใช้โทเค็น {xxx} มากกว่า {0} อาร์กิวเมนต์ที่มีหมายเลขนี่คือการจัดทำเอกสารด้วยตนเองมากขึ้นและเหมาะกับการโลคัลไลซ์เซชันมากขึ้น):

String.prototype.format = function(tokens) {
  var formatted = this;
  for (var token in tokens)
    if (tokens.hasOwnProperty(token))
      formatted = formatted.replace(RegExp("{" + token + "}", "g"), tokens[token]);
  return formatted;
};

การเปลี่ยนแปลงจะเป็น:

  var formatted = l(this);

ที่เรียกใช้ฟังก์ชันการโลคัลไลเซชั่น l () ก่อน


6

ที่นั่น "sprintf" สำหรับ JavaScript ซึ่งคุณสามารถหาที่เป็นhttp://www.webtoolkit.info/javascript-sprintf.html


6

สำหรับผู้ที่ชอบNode.JSและutil.formatคุณสมบัติของมันฉันเพิ่งแยกมันออกเป็นรูปแบบวานิลลาจาวา (มีเพียงฟังก์ชั่นที่ util.format ใช้):

exports = {};

function isString(arg) {
    return typeof arg === 'string';
}
function isNull(arg) {
    return arg === null;
}
function isObject(arg) {
    return typeof arg === 'object' && arg !== null;
}
function isBoolean(arg) {
    return typeof arg === 'boolean';
}
function isUndefined(arg) {
    return arg === void 0;
}
function stylizeNoColor(str, styleType) {
    return str;
}
function stylizeWithColor(str, styleType) {
    var style = inspect.styles[styleType];

    if (style) {
        return '\u001b[' + inspect.colors[style][0] + 'm' + str +
            '\u001b[' + inspect.colors[style][3] + 'm';
    } else {
        return str;
    }
}
function isFunction(arg) {
    return typeof arg === 'function';
}
function isNumber(arg) {
    return typeof arg === 'number';
}
function isSymbol(arg) {
    return typeof arg === 'symbol';
}
function formatPrimitive(ctx, value) {
    if (isUndefined(value))
        return ctx.stylize('undefined', 'undefined');
    if (isString(value)) {
        var simple = '\'' + JSON.stringify(value).replace(/^"|"$/g, '')
                .replace(/'/g, "\\'")
                .replace(/\\"/g, '"') + '\'';
        return ctx.stylize(simple, 'string');
    }
    if (isNumber(value)) {
        // Format -0 as '-0'. Strict equality won't distinguish 0 from -0,
        // so instead we use the fact that 1 / -0 < 0 whereas 1 / 0 > 0 .
        if (value === 0 && 1 / value < 0)
            return ctx.stylize('-0', 'number');
        return ctx.stylize('' + value, 'number');
    }
    if (isBoolean(value))
        return ctx.stylize('' + value, 'boolean');
    // For some reason typeof null is "object", so special case here.
    if (isNull(value))
        return ctx.stylize('null', 'null');
    // es6 symbol primitive
    if (isSymbol(value))
        return ctx.stylize(value.toString(), 'symbol');
}
function arrayToHash(array) {
    var hash = {};

    array.forEach(function (val, idx) {
        hash[val] = true;
    });

    return hash;
}
function objectToString(o) {
    return Object.prototype.toString.call(o);
}
function isDate(d) {
    return isObject(d) && objectToString(d) === '[object Date]';
}
function isError(e) {
    return isObject(e) &&
        (objectToString(e) === '[object Error]' || e instanceof Error);
}
function isRegExp(re) {
    return isObject(re) && objectToString(re) === '[object RegExp]';
}
function formatError(value) {
    return '[' + Error.prototype.toString.call(value) + ']';
}
function formatPrimitiveNoColor(ctx, value) {
    var stylize = ctx.stylize;
    ctx.stylize = stylizeNoColor;
    var str = formatPrimitive(ctx, value);
    ctx.stylize = stylize;
    return str;
}
function isArray(ar) {
    return Array.isArray(ar);
}
function hasOwnProperty(obj, prop) {
    return Object.prototype.hasOwnProperty.call(obj, prop);
}
function formatProperty(ctx, value, recurseTimes, visibleKeys, key, array) {
    var name, str, desc;
    desc = Object.getOwnPropertyDescriptor(value, key) || {value: value[key]};
    if (desc.get) {
        if (desc.set) {
            str = ctx.stylize('[Getter/Setter]', 'special');
        } else {
            str = ctx.stylize('[Getter]', 'special');
        }
    } else {
        if (desc.set) {
            str = ctx.stylize('[Setter]', 'special');
        }
    }
    if (!hasOwnProperty(visibleKeys, key)) {
        name = '[' + key + ']';
    }
    if (!str) {
        if (ctx.seen.indexOf(desc.value) < 0) {
            if (isNull(recurseTimes)) {
                str = formatValue(ctx, desc.value, null);
            } else {
                str = formatValue(ctx, desc.value, recurseTimes - 1);
            }
            if (str.indexOf('\n') > -1) {
                if (array) {
                    str = str.split('\n').map(function (line) {
                        return '  ' + line;
                    }).join('\n').substr(2);
                } else {
                    str = '\n' + str.split('\n').map(function (line) {
                        return '   ' + line;
                    }).join('\n');
                }
            }
        } else {
            str = ctx.stylize('[Circular]', 'special');
        }
    }
    if (isUndefined(name)) {
        if (array && key.match(/^\d+$/)) {
            return str;
        }
        name = JSON.stringify('' + key);
        if (name.match(/^"([a-zA-Z_][a-zA-Z_0-9]*)"$/)) {
            name = name.substr(1, name.length - 2);
            name = ctx.stylize(name, 'name');
        } else {
            name = name.replace(/'/g, "\\'")
                .replace(/\\"/g, '"')
                .replace(/(^"|"$)/g, "'")
                .replace(/\\\\/g, '\\');
            name = ctx.stylize(name, 'string');
        }
    }

    return name + ': ' + str;
}
function formatArray(ctx, value, recurseTimes, visibleKeys, keys) {
    var output = [];
    for (var i = 0, l = value.length; i < l; ++i) {
        if (hasOwnProperty(value, String(i))) {
            output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,
                String(i), true));
        } else {
            output.push('');
        }
    }
    keys.forEach(function (key) {
        if (!key.match(/^\d+$/)) {
            output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,
                key, true));
        }
    });
    return output;
}
function reduceToSingleString(output, base, braces) {
    var length = output.reduce(function (prev, cur) {
        return prev + cur.replace(/\u001b\[\d\d?m/g, '').length + 1;
    }, 0);

    if (length > 60) {
        return braces[0] +
            (base === '' ? '' : base + '\n ') +
            ' ' +
            output.join(',\n  ') +
            ' ' +
            braces[1];
    }

    return braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1];
}
function formatValue(ctx, value, recurseTimes) {
    // Provide a hook for user-specified inspect functions.
    // Check that value is an object with an inspect function on it
    if (ctx.customInspect &&
        value &&
        isFunction(value.inspect) &&
            // Filter out the util module, it's inspect function is special
        value.inspect !== exports.inspect &&
            // Also filter out any prototype objects using the circular check.
        !(value.constructor && value.constructor.prototype === value)) {
        var ret = value.inspect(recurseTimes, ctx);
        if (!isString(ret)) {
            ret = formatValue(ctx, ret, recurseTimes);
        }
        return ret;
    }

    // Primitive types cannot have properties
    var primitive = formatPrimitive(ctx, value);
    if (primitive) {
        return primitive;
    }

    // Look up the keys of the object.
    var keys = Object.keys(value);
    var visibleKeys = arrayToHash(keys);

    if (ctx.showHidden) {
        keys = Object.getOwnPropertyNames(value);
    }

    // This could be a boxed primitive (new String(), etc.), check valueOf()
    // NOTE: Avoid calling `valueOf` on `Date` instance because it will return
    // a number which, when object has some additional user-stored `keys`,
    // will be printed out.
    var formatted;
    var raw = value;
    try {
        // the .valueOf() call can fail for a multitude of reasons
        if (!isDate(value))
            raw = value.valueOf();
    } catch (e) {
        // ignore...
    }

    if (isString(raw)) {
        // for boxed Strings, we have to remove the 0-n indexed entries,
        // since they just noisey up the output and are redundant
        keys = keys.filter(function (key) {
            return !(key >= 0 && key < raw.length);
        });
    }

    // Some type of object without properties can be shortcutted.
    if (keys.length === 0) {
        if (isFunction(value)) {
            var name = value.name ? ': ' + value.name : '';
            return ctx.stylize('[Function' + name + ']', 'special');
        }
        if (isRegExp(value)) {
            return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');
        }
        if (isDate(value)) {
            return ctx.stylize(Date.prototype.toString.call(value), 'date');
        }
        if (isError(value)) {
            return formatError(value);
        }
        // now check the `raw` value to handle boxed primitives
        if (isString(raw)) {
            formatted = formatPrimitiveNoColor(ctx, raw);
            return ctx.stylize('[String: ' + formatted + ']', 'string');
        }
        if (isNumber(raw)) {
            formatted = formatPrimitiveNoColor(ctx, raw);
            return ctx.stylize('[Number: ' + formatted + ']', 'number');
        }
        if (isBoolean(raw)) {
            formatted = formatPrimitiveNoColor(ctx, raw);
            return ctx.stylize('[Boolean: ' + formatted + ']', 'boolean');
        }
    }

    var base = '', array = false, braces = ['{', '}'];

    // Make Array say that they are Array
    if (isArray(value)) {
        array = true;
        braces = ['[', ']'];
    }

    // Make functions say that they are functions
    if (isFunction(value)) {
        var n = value.name ? ': ' + value.name : '';
        base = ' [Function' + n + ']';
    }

    // Make RegExps say that they are RegExps
    if (isRegExp(value)) {
        base = ' ' + RegExp.prototype.toString.call(value);
    }

    // Make dates with properties first say the date
    if (isDate(value)) {
        base = ' ' + Date.prototype.toUTCString.call(value);
    }

    // Make error with message first say the error
    if (isError(value)) {
        base = ' ' + formatError(value);
    }

    // Make boxed primitive Strings look like such
    if (isString(raw)) {
        formatted = formatPrimitiveNoColor(ctx, raw);
        base = ' ' + '[String: ' + formatted + ']';
    }

    // Make boxed primitive Numbers look like such
    if (isNumber(raw)) {
        formatted = formatPrimitiveNoColor(ctx, raw);
        base = ' ' + '[Number: ' + formatted + ']';
    }

    // Make boxed primitive Booleans look like such
    if (isBoolean(raw)) {
        formatted = formatPrimitiveNoColor(ctx, raw);
        base = ' ' + '[Boolean: ' + formatted + ']';
    }

    if (keys.length === 0 && (!array || value.length === 0)) {
        return braces[0] + base + braces[1];
    }

    if (recurseTimes < 0) {
        if (isRegExp(value)) {
            return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');
        } else {
            return ctx.stylize('[Object]', 'special');
        }
    }

    ctx.seen.push(value);

    var output;
    if (array) {
        output = formatArray(ctx, value, recurseTimes, visibleKeys, keys);
    } else {
        output = keys.map(function (key) {
            return formatProperty(ctx, value, recurseTimes, visibleKeys, key, array);
        });
    }

    ctx.seen.pop();

    return reduceToSingleString(output, base, braces);
}
function inspect(obj, opts) {
    // default options
    var ctx = {
        seen: [],
        stylize: stylizeNoColor
    };
    // legacy...
    if (arguments.length >= 3) ctx.depth = arguments[2];
    if (arguments.length >= 4) ctx.colors = arguments[3];
    if (isBoolean(opts)) {
        // legacy...
        ctx.showHidden = opts;
    } else if (opts) {
        // got an "options" object
        exports._extend(ctx, opts);
    }
    // set default options
    if (isUndefined(ctx.showHidden)) ctx.showHidden = false;
    if (isUndefined(ctx.depth)) ctx.depth = 2;
    if (isUndefined(ctx.colors)) ctx.colors = false;
    if (isUndefined(ctx.customInspect)) ctx.customInspect = true;
    if (ctx.colors) ctx.stylize = stylizeWithColor;
    return formatValue(ctx, obj, ctx.depth);
}
exports.inspect = inspect;


// http://en.wikipedia.org/wiki/ANSI_escape_code#graphics
inspect.colors = {
    'bold': [1, 22],
    'italic': [3, 23],
    'underline': [4, 24],
    'inverse': [7, 27],
    'white': [37, 39],
    'grey': [90, 39],
    'black': [30, 39],
    'blue': [34, 39],
    'cyan': [36, 39],
    'green': [32, 39],
    'magenta': [35, 39],
    'red': [31, 39],
    'yellow': [33, 39]
};

// Don't use 'blue' not visible on cmd.exe
inspect.styles = {
    'special': 'cyan',
    'number': 'yellow',
    'boolean': 'yellow',
    'undefined': 'grey',
    'null': 'bold',
    'string': 'green',
    'symbol': 'green',
    'date': 'magenta',
    // "name": intentionally not styling
    'regexp': 'red'
};


var formatRegExp = /%[sdj%]/g;
exports.format = function (f) {
    if (!isString(f)) {
        var objects = [];
        for (var j = 0; j < arguments.length; j++) {
            objects.push(inspect(arguments[j]));
        }
        return objects.join(' ');
    }

    var i = 1;
    var args = arguments;
    var len = args.length;
    var str = String(f).replace(formatRegExp, function (x) {
        if (x === '%%') return '%';
        if (i >= len) return x;
        switch (x) {
            case '%s':
                return String(args[i++]);
            case '%d':
                return Number(args[i++]);
            case '%j':
                try {
                    return JSON.stringify(args[i++]);
                } catch (_) {
                    return '[Circular]';
                }
            default:
                return x;
        }
    });
    for (var x = args[i]; i < len; x = args[++i]) {
        if (isNull(x) || !isObject(x)) {
            str += ' ' + x;
        } else {
            str += ' ' + inspect(x);
        }
    }
    return str;
};

เก็บเกี่ยวได้จาก: https://github.com/joyent/node/blob/master/lib/util.js



5

ฉันมี formatter ที่ยาวกว่าเล็กน้อยสำหรับ JavaScript ที่นี่ ...

คุณสามารถทำการฟอร์แมตได้หลายวิธี:

  • String.format(input, args0, arg1, ...)
  • String.format(input, obj)
  • "literal".format(arg0, arg1, ...)
  • "literal".format(obj)

นอกจากนี้ถ้าคุณพูด ObjectBase.prototype.format (เช่นกับDateJS ) ก็จะใช้มัน

ตัวอย่าง...

var input = "numbered args ({0}-{1}-{2}-{3})";
console.log(String.format(input, "first", 2, new Date()));
//Outputs "numbered args (first-2-Thu May 31 2012...Time)-{3})"

console.log(input.format("first", 2, new Date()));
//Outputs "numbered args(first-2-Thu May 31 2012...Time)-{3})"

console.log(input.format(
    "object properties ({first}-{second}-{third:yyyy-MM-dd}-{fourth})"
    ,{
        'first':'first'
        ,'second':2
        ,'third':new Date() //assumes Date.prototype.format method
    }
));
//Outputs "object properties (first-2-2012-05-31-{3})"

ฉันใช้นามแฝงด้วย. asFormat และมีการตรวจจับบางอย่างในกรณีที่มี string.format อยู่แล้ว (เช่นกับ MS Ajax Toolkit (ฉันเกลียดไลบรารีนั้น)


5

ในกรณีที่มีคนต้องการฟังก์ชั่นเพื่อป้องกันไม่ให้เกิดมลภาวะระดับโลกนี่คือฟังก์ชั่นที่เหมือนกัน:

  function _format (str, arr) {
    return str.replace(/{(\d+)}/g, function (match, number) {
      return typeof arr[number] != 'undefined' ? arr[number] : match;
    });
  };

3

เราสามารถใช้ไลบรารี่การดำเนินการสตริง String แบบง่ายน้ำหนักเบาสำหรับ typescript

String.Format ():

var id = image.GetId()
String.Format("image_{0}.jpg", id)
output: "image_2db5da20-1c5d-4f1a-8fd4-b41e34c8c5b5.jpg";

รูปแบบสตริงสำหรับตัวระบุ:

var value = String.Format("{0:L}", "APPLE"); //output "apple"

value = String.Format("{0:U}", "apple"); // output "APPLE"

value = String.Format("{0:d}", "2017-01-23 00:00"); //output "23.01.2017"


value = String.Format("{0:s}", "21.03.2017 22:15:01") //output "2017-03-21T22:15:01"

value = String.Format("{0:n}", 1000000);
//output "1.000.000"

value = String.Format("{0:00}", 1);
//output "01"

รูปแบบสตริงสำหรับวัตถุรวมถึงตัวระบุ:

var fruit = new Fruit();
fruit.type = "apple";
fruit.color = "RED";
fruit.shippingDate = new Date(2018, 1, 1);
fruit.amount = 10000;

String.Format("the {type:U} is {color:L} shipped on {shippingDate:s} with an amount of {amount:n}", fruit);
// output: the APPLE is red shipped on 2018-01-01 with an amount of 10.000

2

ฉันไม่เห็นString.formatตัวแปร:

String.format = function (string) {
    var args = Array.prototype.slice.call(arguments, 1, arguments.length);
    return string.replace(/{(\d+)}/g, function (match, number) {
        return typeof args[number] != "undefined" ? args[number] : match;
    });
};

2

สำหรับใช้กับฟังก์ชันความสำเร็จ jQuery.ajax () ส่งอาร์กิวเมนต์เดียวและสตริงแทนที่ด้วยคุณสมบัติของวัตถุนั้นเป็น {propertyName}:

String.prototype.format = function () {
    var formatted = this;
    for (var prop in arguments[0]) {
        var regexp = new RegExp('\\{' + prop + '\\}', 'gi');
        formatted = formatted.replace(regexp, arguments[0][prop]);
    }
    return formatted;
};

ตัวอย่าง:

var userInfo = ("Email: {Email} - Phone: {Phone}").format({ Email: "someone@somewhere.com", Phone: "123-123-1234" });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.