Hướng dẫn javascript multiline string concatenation - nối chuỗi nhiều dòng trong javascript
Update:Ecmascript 6 (ES6) giới thiệu một loại nghĩa đen mới, cụ thể là các mẫu chữ. Họ có nhiều tính năng, nội suy biến đổi giữa những người khác, nhưng quan trọng nhất là cho câu hỏi này, chúng có thể là đa dòng.template literals. They have many features, variable interpolation among others, but most importantly for this question, they can be multiline. Show Một mẫu theo nghĩa đen được phân định bởi Backticks:
(Lưu ý: Tôi không ủng hộ việc sử dụng HTML trong chuỗi) Hỗ trợ trình duyệt là OK, nhưng bạn có thể sử dụng Transpilers để tương thích hơn. Câu trả lời ES5 gốc:JavaScript không có cú pháp tài liệu ở đây. Tuy nhiên, bạn có thể thoát khỏi dòng mới theo nghĩa đen, đã đến gần:
Kelderic 6.2688 Huy hiệu vàng44 Huy hiệu bạc82 Huy hiệu đồng8 gold badges44 silver badges82 bronze badges Đã trả lời ngày 30 tháng 4 năm 2009 lúc 2:15Apr 30, 2009 at 2:15
Ẩn danhAnonymous 47.6K1 Huy hiệu vàng24 Huy hiệu bạc19 Huy hiệu đồng1 gold badge24 silver badges19 bronze badges 23 Cập nhật ES6:Như câu trả lời đầu tiên đề cập, với ES6/Babel, giờ đây bạn có thể tạo các chuỗi nhiều dòng chỉ bằng cách sử dụng Backticks:
Biến nội suy là một tính năng mới phổ biến đi kèm với các chuỗi được phân định từ bỏ lại:
Điều này chỉ chuyển xuống để kết hợp:
Câu trả lời ES5 gốc:
Ẩn danhJun 6, 2011 at 2:30
47.6K1 Huy hiệu vàng24 Huy hiệu bạc19 Huy hiệu đồngDevin Rhode Cập nhật ES6:6 gold badges52 silver badges69 bronze badges 10 Như câu trả lời đầu tiên đề cập, với ES6/Babel, giờ đây bạn có thể tạo các chuỗi nhiều dòng chỉ bằng cách sử dụng Backticks: Biến nội suy là một tính năng mới phổ biến đi kèm với các chuỗi được phân định từ bỏ lại:
Điều này chỉ chuyển xuống để kết hợp:
Hướng dẫn kiểu JavaScript của Google khuyến nghị sử dụng chuỗi nối chuỗi thay vì thoát khỏi Newlines:1:
Không làm điều này: Khoảng trắng ở đầu mỗi dòng không thể bị tước một cách an toàn tại thời điểm biên dịch; Whitespace sau khi chém sẽ dẫn đến các lỗi khó khăn; Và trong khi hầu hết các công cụ tập lệnh hỗ trợ điều này, nó không phải là một phần của Ecmascript. supports spanning strings over multiple lines using template strings: 0Sử dụng chuỗi concatenation thay thế: Note: this will be lost after minifying/obfuscating your code Đã trả lời ngày 6 tháng 6 năm 2011 lúc 2:30Apr 30, 2009 at 7:22
Devin Rhodedevin RhodeKooiInc 21.4K6 Huy hiệu vàng52 Huy hiệu bạc69 Huy hiệu Đồng31 gold badges141 silver badges176 bronze badges 32 Mẫu 2 không có sẵn trong JS (tôi nhớ đã sử dụng nó nhiều trong những ngày tốt đẹp của tôi).Để giữ sự giám sát với các chuỗi đa dòng phức hoặc dài, đôi khi tôi sử dụng một mẫu mảng: hoặc mẫu ẩn danh đã được hiển thị (Escape Newline), có thể là một khối xấu xí trong mã của bạn: 1Đây là một kỳ lạ khác nhưng làm việc 'Trick'1: 2Chỉnh sửa bên ngoài: JSfiddle
Sử dụng chức năng sau: Bạn có thể có ở đây-DOCUMENT như thế này: Phương pháp đã được kiểm tra thành công trong các trình duyệt sau (không được đề cập = không được kiểm tra): 3Tức là 4 - 10
Opera 9.50 - 12 (không phải trong 9-) Safari 4 - 6 (không phải trong 3-)2 gold badges6 silver badges22 bronze badges Chrome 1 - 45Apr 6, 2011 at 18:16
Firefox 17 - 21 (không phải trong 16-)Jordão Rekonq 0,7.0 - 0.8.012 gold badges113 silver badges142 bronze badges 23 Không được hỗ trợ trong Konqueror 4.7.4 43 Hãy cẩn thận với minifier của bạn, mặc dù. Nó có xu hướng loại bỏ ý kiến. Đối với máy nén YUI, một nhận xét bắt đầu bằng 3 (như cái tôi đã sử dụng) sẽ được bảo tồn. 5Tôi nghĩ rằng một giải pháp thực sự sẽ là sử dụng CoffeeScript.Mar 21, 2013 at 21:05
Cập nhật ES6: Bạn có thể sử dụng Backtick thay vì tạo chức năng với nhận xét và chạy TOSTRING trên bình luận. Regex sẽ cần được cập nhật để chỉ các không gian dải. Bạn cũng có thể có một phương thức nguyên mẫu chuỗi để thực hiện việc này:Luke Ai đó nên viết phương thức chuỗi này .RemoveIndentation ...;)1 gold badge11 silver badges5 bronze badges 10 GPL 61.2952 huy hiệu vàng6 Huy hiệu bạc22 Huy hiệu đồng Đã trả lời ngày 6 tháng 4 năm 2011 lúc 18:16Jan 3, 2012 at 19:51
JordãojordãoPeter V. Mørch 54.1K12 Huy hiệu vàng113 Huy hiệu bạc142 Huy hiệu đồng8 gold badges63 silver badges89 bronze badges 10 Bạn có thể làm được việc này... e.g. 7Tôi đã đưa ra phương pháp rất lớn này của một chuỗi nhiều lót. Vì việc chuyển đổi một hàm thành một chuỗi cũng trả về bất kỳ nhận xét nào bên trong hàm, bạn có thể sử dụng các nhận xét làm chuỗi của bạn bằng cách sử dụng nhận xét đa dạng /** /. Bạn chỉ cần cắt các đầu và bạn có chuỗi của bạn. 8Đã trả lời ngày 21 tháng 3 năm 2013 lúc 21:05 9Lukeluke
1.9641 Huy hiệu vàng11 Huy hiệu bạc 5Aug 17, 2012 at 14:25
Tôi ngạc nhiên khi không thấy điều này, bởi vì nó hoạt động ở mọi nơi tôi đã thử nghiệm và rất hữu ích cho ví dụ: Mẫu:Tom Beech Có ai biết về một môi trường có HTML nhưng nó không hoạt động?1 gold badge20 silver badges25 bronze badges 9 Đã trả lời ngày 3 tháng 1 năm 2012 lúc 19:51 1. Slash Concatenation 02. Kết hợp thường xuyên 13. Mảng tham gia nối 2Hiệu suất khôn ngoan, cắt ghép chém (đầu tiên) là nhanh nhất.Slash concatenation (first one) is the fastest. Tham khảo trường hợp kiểm tra này để biết thêm chi tiết về hiệu suất this test case for more details regarding the performance Update: Với ES2015, chúng ta có thể tận dụng tính năng chuỗi mẫu của nó. Với nó, chúng ta chỉ cần sử dụng các cú đánh ngược để tạo chuỗi nhiều dòngES2015, we can take advantage of its Template strings feature. With it, we just need to use back-ticks for creating multi line strings Example: 3Đã trả lời ngày 26 tháng 5 năm 2014 lúc 9:34May 26, 2014 at 9:34
2 Sử dụng thẻ script:
Đã trả lời ngày 23 tháng 8 năm 2012 lúc 18:30Aug 23, 2012 at 18:30
jpfreirejpfreirejpfreire 1.26816 huy hiệu bạc23 Huy hiệu đồng16 silver badges23 bronze badges 3 Tôi thích cú pháp này và lời nói: 5(nhưng thực sự không thể được coi là chuỗi đa dòng) Đã trả lời ngày 13 tháng 12 năm 2011 lúc 20:09Dec 13, 2011 at 20:09
Sementesementesemente 6.9473 Huy hiệu vàng33 Huy hiệu bạc35 Huy hiệu Đồng3 gold badges33 silver badges35 bronze badges 4 Downvoters: Mã này chỉ được cung cấp cho thông tin.: This code is supplied for information only. Điều này đã được thử nghiệm trong FX 19 và Chrome 24 trên Mac THỬ NGHIỆM 6 7Đã trả lời ngày 17 tháng 2 năm 2013 lúc 9:56Feb 17, 2013 at 9:56
MPLUNGJANMPLUNGJANmplungjan 160K27 Huy hiệu vàng168 Huy hiệu bạc226 Huy hiệu Đồng27 gold badges168 silver badges226 bronze badges 10 Có thư viện này làm cho nó đẹp: https://github.com/sindresorhus/multiline Trước 8Sau 9Đã trả lời ngày 25 tháng 4 năm 2014 lúc 11:34Apr 25, 2014 at 11:34
Mightyiammightyiammightyiam 2.5741 Huy hiệu vàng25 Huy hiệu bạc37 Huy hiệu đồng1 gold badge25 silver badges37 bronze badges 5 Tìm thấy rất nhiều câu trả lời được thiết kế ở đây. Hai câu trả lời hay nhất theo ý kiến của tôi là: 1: 0mà cuối cùng ghi lại: 12: 2Điều đó ghi lại chính xác nhưng nó xấu xí trong tệp tập lệnh nếu STR được lồng vào các hàm / đối tượng bên trong, v.v. ...: 3Câu trả lời thực sự đơn giản của tôi với Regex ghi lại chính xác: 4Xin lưu ý rằng đó không phải là giải pháp hoàn hảo nhưng nó hoạt động nếu bạn chắc chắn rằng sau dòng mới (\ n), ít nhất một không gian sẽ đến (+ có nghĩa là ít nhất một lần xuất hiện). Nó cũng sẽ hoạt động với * (không hoặc nhiều hơn). Bạn có thể rõ ràng hơn và sử dụng {n,} có nghĩa là ít nhất n xảy ra. Đã trả lời ngày 5 tháng 11 năm 2021 lúc 17:46Nov 5, 2021 at 17:46
NivnivNiv 3954 Huy hiệu bạc14 Huy hiệu đồng4 silver badges14 bronze badges 1 Một cách đơn giản để in các chuỗi đa dòng trong JavaScript là bằng cách sử dụng các mẫu chữ (chuỗi mẫu) được biểu thị bằng các backticks (``). Bạn cũng có thể sử dụng các biến bên trong giống như chuỗi mẫu (` 6`)Bạn cũng có thể 5Đã trả lời ngày 2 tháng 3 lúc 17:26Mar 2 at 17:26
Tương đương trong JavaScript là: 6Đây là đặc điểm kỹ thuật. Xem hỗ trợ trình duyệt ở cuối trang này. Dưới đây là một số ví dụ quá. Đã trả lời ngày 4 tháng 11 năm 2015 lúc 13:59Nov 4, 2015 at 13:59
Lonnie Bestlonnie BestLonnie Best 8.89010 Huy hiệu vàng52 Huy hiệu bạc89 Huy hiệu Đồng10 gold badges52 silver badges89 bronze badges Điều này hoạt động trong IE, Safari, Chrome và Firefox: 7Đã trả lời ngày 23 tháng 11 năm 2010 lúc 16:46Nov 23, 2010 at 16:46
5 Tóm lại, tôi đã thử 2 cách tiếp cận được liệt kê ở đây trong lập trình JavaScript người dùng (Opera 11.01):
Vì vậy, tôi khuyên bạn nên tiếp cận làm việc cho người dùng Opera người dùng JS. Không giống như những gì tác giả đã nói:
Nó hoạt động trong Opera 11. Ít nhất trong các tập lệnh JS của người dùng. Thật tệ là tôi không thể bình luận về câu trả lời cá nhân hoặc nâng cao câu trả lời, tôi sẽ làm điều đó ngay lập tức. Nếu có thể, một người có đặc quyền cao hơn xin vui lòng làm điều đó cho tôi.
Đã trả lời ngày 20 tháng 5 năm 2011 lúc 13:10May 20, 2011 at 13:10
TylertylerTyler 3494 Huy hiệu bạc11 Huy hiệu đồng4 silver badges11 bronze badges 2 Tiện ích mở rộng của tôi cho https://stackoverflow.com/a/15558082/80404. Nó mong đợi bình luận trong một hình thức 7 nơi biểu tượng! được sử dụng để ngăn chặn việc loại bỏ bằng cách thu nhỏ (ít nhất là đối với máy nén YUI) 8Example: 9
Đã trả lời ngày 11 tháng 12 năm 2013 lúc 17:30Dec 11, 2013 at 17:30
Pocheptsovpocheptsovpocheptsov 1.92423 Huy hiệu bạc23 Huy hiệu đồng23 silver badges23 bronze badges Chính xácRuby Produce: 8 - bên dưới JS Sản xuất chính xác chuỗi giống nhau 0Đây là sự cải thiện cho câu trả lời tốt nhất của Lonnie vì các ký tự dòng mới trong câu trả lời của anh ấy không chính xác là các vị trí giống như trong đầu ra Ruby Đã trả lời ngày 10 tháng 6 năm 2020 lúc 20:45Jun 10, 2020 at 20:45
Kamil Kiełczewskikamil KiełczewskiKamil Kiełczewski 76.7K26 Huy hiệu vàng339 Huy hiệu bạc316 Huy hiệu Đồng26 gold badges339 silver badges316 bronze badges 2 Được cập nhật cho năm 2015: Bây giờ là sáu năm sau: Hầu hết mọi người sử dụng trình tải mô -đun và các hệ thống mô -đun chính đều có các cách tải mẫu. Nó không phải là nội tuyến, nhưng loại chuỗi đa dòng phổ biến nhất là các mẫu và các mẫu thường nên được giữ khỏi JS.: it's six years later now: most people use a module loader, and the main module systems each have ways of loading templates. It's not inline, but the most common type of multiline string are templates, and templates should generally be kept out of JS anyway. Yêu cầu.js: 'Yêu cầu văn bản'.Sử dụng plugin 'văn bản', với mẫu đa dòng trong mẫu.htmltemplate.html 1NPM/Browserify: Mô -đun 'BRFS'Browserify sử dụng mô -đun 'BRFS' để tải các tệp văn bản. Điều này thực sự sẽ xây dựng mẫu của bạn vào HTML đi kèm của bạn. 2Dễ. Đã trả lời ngày 10 tháng 2 năm 2014 lúc 11:13Feb 10, 2014 at 11:13
Mikemaccanamikemaccanamikemaccana 99,8K89 Huy hiệu vàng363 Huy hiệu bạc452 Huy hiệu Đồng89 gold badges363 silver badges452 bronze badges Nếu bạn sẵn sàng sử dụng các dòng mới thoát ra, chúng có thể được sử dụng độc đáo. Nó trông giống như một tài liệu có đường viền trang.It looks like a document with a page border. Đã trả lời ngày 28 tháng 4 năm 2015 lúc 18:31Apr 28, 2015 at 18:31
SEOSEOseo 1.93123 Huy hiệu bạc18 Huy hiệu đồng23 silver badges18 bronze badges 2 Cách dễ nhất để tạo ra các chuỗi đa dòng trong javascrips là với việc sử dụng backticks (``). Điều này cho phép bạn tạo các chuỗi đa dòng trong đó bạn có thể chèn các biến với 9.Example: 3Khả năng tương thích:
Kiểm tra khả năng tương thích chính xác trong tài liệu Mozilla tại đây Đã trả lời ngày 9 tháng 9 năm 2018 lúc 11:00Sep 9, 2018 at 11:00
2 Cách thực hiện ES6 sẽ là bằng cách sử dụng các mẫu chữ: 4Tham khảo thêm ở đây Đã trả lời ngày 13 tháng 7 năm 2018 lúc 17:25Jul 13, 2018 at 17:25
1 Bạn có thể sử dụng TypeScript (JavaScript SuperSet), nó hỗ trợ các chuỗi đa dòng và chuyển trở lại JavaScript thuần túy mà không cần chi phí: 5Nếu bạn muốn hoàn thành tương tự với JavaScript đơn giản: 6Lưu ý rằng iPad/Safari không hỗ trợ 2Nếu bạn có nhiều mã kế thừa, bạn cũng có thể sử dụng biến thể JavaScript đơn giản trong TypeScript (cho mục đích dọn dẹp): 7Và bạn có thể sử dụng đối tượng chuỗi đa dòng từ biến thể JavaScript đơn giản, nơi bạn đặt các mẫu vào một tệp khác (mà bạn có thể hợp nhất trong gói). Bạn có thể thử TypeScript tại http://www.typescriptlang.org/playground Đã trả lời ngày 21 tháng 9 năm 2015 lúc 15:23Sep 21, 2015 at 15:23
Stefan Steigerstefan SteigerStefan Steiger 75.2K63 Huy hiệu vàng369 Huy hiệu bạc434 Huy hiệu đồng63 gold badges369 silver badges434 bronze badges 2 ES6 cho phép bạn sử dụng backtick để chỉ định một chuỗi trên nhiều dòng. Nó được gọi là một mẫu theo nghĩa đen. Như thế này: 8Sử dụng Backtick hoạt động trong NodeJS và nó được hỗ trợ bởi Chrome, Firefox, Edge, Safari và Opera. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals Đã trả lời ngày 28 tháng 3 năm 2016 lúc 18:43Mar 28, 2016 at 18:43
earl3searl3searl3s 2.3231 Huy hiệu vàng22 Huy hiệu bạc24 Huy hiệu đồng1 gold badge22 silver badges24 bronze badges Cũng xin lưu ý rằng, khi mở rộng chuỗi qua nhiều dòng bằng cách sử dụng dấu gạch chéo ngược ở cuối mỗi dòng, bất kỳ ký tự bổ sung nào (chủ yếu là khoảng trắng, tab và bình luận được thêm vào) sau khi lùi lại sẽ gây ra lỗi ký tự bất ngờ, tôi mất một giờ để tìm ngoài 9Đã trả lời ngày 13 tháng 7 năm 2016 lúc 19:25Jul 13, 2016 at 19:25
Prakash GPZprakash GPZPrakash GPz 1.6054 Huy hiệu vàng16 Huy hiệu bạc25 Huy hiệu Đồng4 gold badges16 silver badges25 bronze badges
Xin vui lòng cho tình yêu của Internet sử dụng chuỗi nối chuỗi và chọn không sử dụng các giải pháp ES6 cho việc này. ES6 không được hỗ trợ tất cả trên bảng, giống như CSS3 và một số trình duyệt nhất định bị chậm để thích nghi với phong trào CSS3. Sử dụng JavaScript đơn giản, người dùng cuối của bạn sẽ cảm ơn bạn. Example: 3Đã trả lời ngày 11 tháng 10 năm 2017 lúc 23:28Oct 11, 2017 at 23:28
2 Bạn có thể sử dụng các mẫu được gắn thẻ để đảm bảo bạn có được đầu ra mong muốn. Ví dụ: 0Đã trả lời ngày 8 tháng 7 năm 2020 lúc 21:17Jul 8, 2020 at 21:17
Pedro Andradepedro AndradePedro Andrade 4,4451 Huy hiệu vàng21 Huy hiệu bạc23 Huy hiệu đồng1 gold badge21 silver badges23 bronze badges Phiên bản của tôi dựa trên mảng tham gia cho chuỗi Concat: 1Điều này đã làm việc tốt cho tôi, đặc biệt là khi tôi thường chèn các giá trị vào HTML được xây dựng theo cách này. Nhưng nó có rất nhiều hạn chế. Thụt lề sẽ là tốt đẹp. Không phải đối phó với dấu ngoặc kép lồng nhau sẽ thực sự tốt đẹp, và chỉ là sự cồng kềnh của nó làm phiền tôi. Là .push () để thêm vào mảng chiếm rất nhiều thời gian? Xem câu trả lời liên quan này: (Có lý do nhà phát triển JavaScript không sử dụng Array.push () không?) Sau khi xem các lần chạy thử nghiệm (đối lập) này, có vẻ như.
Đã trả lời ngày 14 tháng 10 năm 2013 lúc 0:58Oct 14, 2013 at 0:58
KtysktysKTys 1701 Huy hiệu bạc9 Huy hiệu đồng1 silver badge9 bronze badges |