Tìm hiểu cách thêm ký tự dòng mới trong JavaScript, cả cho đầu ra bảng điều khiển và đầu ra DOM
Có hai cách để thêm một dòng mới trong JavaScript tùy thuộc vào đầu ra bạn muốn đạt được.
- Thêm các dòng mới vào đầu ra bảng điều khiển
- Thêm các dòng mới vào đầu ra DOM
Hướng dẫn này sẽ chỉ cho bạn cách thêm một dòng mới cho bảng điều khiển JavaScript và DOM.
Thêm các dòng mới vào đầu ra bảng điều khiển
Thêm các dòng mới vào đầu ra DOM
Thêm ký tự dòng mới ở giữa chuỗi của bạn như thế này:
let str = "Hello World!\nThis is my string";
console.log[str];
Biểu tượng
Hello World!
This is my string
1 sẽ tạo ra một đường ngắt dòng trong chuỗi, tạo một chuỗi nhiều dòng như được hiển thị bên dưới:Hello World!
This is my string
Ngoài ra, bạn cũng có thể thêm một lần ngắt dòng mới bằng cách sử dụng
Hello World!
This is my string
3 khi bạn sử dụng cú pháp theo nghĩa đen của mẫu.Một chuỗi chữ cái mẫu được đặt trong các backticks [``] thay vì trích dẫn [''] như thế này:
let str = `Hello World!
This is my string
Adding new line using template string`;
console.log[str];
Đầu ra của mã trên sẽ như sau:
Hello World!
This is my string
Adding new line using template string
Bạn có thể thêm nhiều lần phá vỡ dòng như bạn cần trong chuỗi của mình.
Tiếp theo, hãy để Lừa học cách thêm các dòng mới vào đầu ra DOM
Thêm các dòng mới vào đầu ra DOM
Khi bạn cần xuất một dòng mới cho một trang web, bạn cần thao tác với DOM và thêm phần tử
Hello World!
This is my string
4 HTML để văn bản sẽ được in bên dưới.Ví dụ: bạn có thể viết lệnh JavaScript như sau:
document.write["Hello World!
This is my string"];
Đầu ra cho thẻ
Hello World!
This is my string
5 sẽ như sau:
Hello World!
This is my string
Biết được điều này, bạn có thể thao tác văn bản của phần tử HTML để thêm một dòng mới bằng cách thay đổi thuộc tính
Hello World!
This is my string
6 và thêm phần tử Hello World!
This is my string
7.Mã trong thẻ
Hello World!
This is my string
8 bên dưới cho thấy cách bạn thêm một dòng mới vào Hello World!
This is my string
9 với ID let str = `Hello World!
This is my string
Adding new line using template string`;
console.log[str];
0:
let element = document.getElementById["myDiv"];
element.innerHTML = "Hello World!
This is my string";
Đầu ra cho thẻ
Hello World!
This is my string
9 sẽ như sau:
Hello World!
This is my string
Khi tạo ra đầu ra DOM, bạn có thể sử dụng các ngắt dòng được tạo bằng cách nhấn
Hello World!
This is my string
3 hoặc biểu tượng Hello World!
This is my string
1.Không có thẻ
4, chuỗi sẽ xuất hiện trên cùng một dòng.Hello World!
This is my string
Và đó là cách mà bạn có thể thêm một dòng mới bằng JavaScript cho các đầu ra khác nhau. Công việc tốt đẹp! 👍
Tôi vừa thử nghiệm một vài trình duyệt bằng cách sử dụng bit JavaScript ngớ ngẩn này:
function log_newline[msg, test_value] {
if [!test_value] {
test_value = document.getElementById['test'].value;
}
console.log[msg + ': ' + [test_value.match[/\r/] ? 'CR' : '']
+ ' ' + [test_value.match[/\n/] ? 'LF' : '']];
}
log_newline['HTML source'];
log_newline['JS string', "foo\nbar"];
log_newline['JS template literal', `bar
baz`];
IE8 và Opera 9 trên Windows sử dụng
let str = `Hello World!
This is my string
Adding new line using template string`;
console.log[str];
5. Tất cả các trình duyệt khác tôi đã thử nghiệm [Safari 4 và Firefox 3.5 trên Windows và Firefox 3.0 trên Linux] sử dụng Hello World!
This is my string
1. Tất cả đều có thể xử lý Hello World!
This is my string
1 tốt khi đặt giá trị, mặc dù IE và Opera sẽ chuyển đổi nó trở lại let str = `Hello World!
This is my string
Adding new line using template string`;
console.log[str];
5 một lần nữa trong nội bộ. Có một bài viết của SitePoint với một số chi tiết có tên là Kết thúc dòng trong JavaScript.Cũng lưu ý rằng điều này độc lập với các kết thúc dòng thực tế trong chính tệp HTML [cả
Hello World!
This is my string
1 và let str = `Hello World!
This is my string
Adding new line using template string`;
console.log[str];
5 cho cùng một kết quả].Khi gửi một biểu mẫu, tất cả các trình duyệt có sẵn các dòng mới thành
Hello World!
This is my string
Adding new line using template string
1 trong mã hóa URL. Để thấy điều đó, tải, ví dụ: Hello World!
This is my string
Adding new line using template string
2 và nhấn nút gửi. [Một số trình duyệt chặn tải của trang đã gửi, nhưng bạn có thể thấy các giá trị biểu mẫu được mã hóa URL trong bảng điều khiển.]Mặc dù vậy, tôi không nghĩ rằng bạn thực sự cần phải làm nhiều quyết định. Nếu bạn chỉ muốn chia văn bản trên Newlines, bạn có thể làm điều gì đó như sau:
Hello World!
This is my string
0