Hướng dẫn html inline javascript variable - biến javascript nội dòng html

Tiếp theo, chúng ta sẽ chuyển sự chú ý của chúng ta sang các chuỗi - đây là những gì của văn bản được gọi trong lập trình. Trong bài viết này, chúng tôi sẽ xem xét tất cả những điều phổ biến mà bạn thực sự nên biết về các chuỗi khi học JavaScript, chẳng hạn như tạo chuỗi, thoát khỏi trích dẫn trong chuỗi và kết hợp các chuỗi với nhau.

Sức mạnh của lời nói

Khá nhiều tất cả các chương trình chúng tôi đã cho bạn thấy cho đến nay trong khóa học có liên quan đến một số thao tác chuỗi.

Chuỗi - những điều cơ bản

Các chuỗi được xử lý tương tự như các con số ngay từ cái nhìn đầu tiên, nhưng khi bạn đào sâu hơn, bạn sẽ bắt đầu thấy một số khác biệt đáng chú ý. Hãy bắt đầu bằng cách nhập một số dòng cơ bản vào bảng điều khiển nhà phát triển trình duyệt để làm quen với chính chúng ta.

Tạo một chuỗi

1. Để bắt đầu, hãy nhập các dòng sau:

   const string = "The revolution will not be televised.";
   console.log(string);
   

   Giống như chúng tôi đã làm với các số, chúng tôi đang khai báo một biến, khởi tạo nó với giá trị chuỗi và sau đó trả về giá trị. Sự khác biệt duy nhất ở đây là khi viết một chuỗi, bạn cần bao quanh giá trị với các trích dẫn.
2. Nếu bạn không làm điều này, hoặc bỏ lỡ một trong các trích dẫn, bạn sẽ gặp lỗi. Thử nhập các dòng sau:

   const badString1 = This is a test;
   const badString2 = 'This is a test;
   const badString3 = This is a test';
   

   Những dòng này không hoạt động vì bất kỳ văn bản nào không có trích dẫn xung quanh nó được coi là một tên biến, tên thuộc tính, một từ dành riêng hoặc tương tự. Nếu trình duyệt không thể tìm thấy nó, thì một lỗi được nêu ra (ví dụ: "thiếu; trước câu lệnh"). Nếu trình duyệt có thể thấy một chuỗi bắt đầu ở đâu, nhưng không thể tìm thấy kết thúc của chuỗi, như được chỉ ra bởi báo giá thứ 2, nó sẽ phàn nàn với một lỗi (với "Chuỗi chưa kết thúc theo nghĩa đen"). Nếu chương trình của bạn đang nêu ra các lỗi như vậy, thì hãy quay lại và kiểm tra tất cả các chuỗi của bạn để đảm bảo bạn không thiếu dấu ngoặc kép.
3. Điều sau đây sẽ hoạt động nếu trước đây bạn đã xác định biến

   const string = "The revolution will not be televised.";
   console.log(string);
   

   8 - hãy thử ngay bây giờ:

   const badString = string;
   console.log(badString);
   

   const string = "The revolution will not be televised.";
   console.log(string);
   

   9 hiện được đặt để có cùng giá trị với

   const string = "The revolution will not be televised.";
   console.log(string);
   

   8.

Trích dẫn đơn so với trích dẫn kép

1. Trong JavaScript, bạn có thể chọn trích dẫn đơn hoặc trích dẫn đôi để bọc chuỗi của bạn. Cả hai điều sau đây sẽ hoạt động ổn:

   const sgl = 'Single quotes.';
   const dbl = "Double quotes";
   console.log(sgl);
   console.log(dbl);
   

2. Có rất ít sự khác biệt giữa hai, và bạn sử dụng là tùy thuộc vào sở thích cá nhân. Bạn nên chọn một và bám vào nó, tuy nhiên; Mã được trích dẫn khác nhau có thể gây nhầm lẫn, đặc biệt nếu bạn sử dụng hai trích dẫn khác nhau trên cùng một chuỗi! Điều sau đây sẽ trả về một lỗi:

   const badQuotes = 'What on earth?";
   

3. Trình duyệt sẽ nghĩ rằng chuỗi chưa được đóng vì loại báo giá khác mà bạn không sử dụng để chứa các chuỗi của bạn có thể xuất hiện trong chuỗi. Ví dụ, cả hai đều ổn:

   const sglDbl = 'Would you eat a "fish supper"?';
   const dblSgl = "I'm feeling blue.";
   console.log(sglDbl);
   console.log(dblSgl);
   

4. Tuy nhiên, bạn không thể bao gồm cùng một dấu trích dẫn bên trong chuỗi nếu nó được sử dụng để chứa chúng. Lỗi sau đây, vì nó nhầm lẫn trình duyệt về nơi chuỗi kết thúc:

   const bigmouth = 'I've got no right to take my place…';
   

   Điều này dẫn chúng ta rất độc đáo vào chủ đề tiếp theo của chúng ta.

Thoát khỏi các ký tự trong một chuỗi

Để khắc phục dòng mã vấn đề trước đây của chúng tôi, chúng tôi cần thoát khỏi dấu hiệu trích dẫn vấn đề. Thoát khỏi các ký tự có nghĩa là chúng ta làm điều gì đó với họ để đảm bảo chúng được công nhận là văn bản, không phải là một phần của mã. Trong JavaScript, chúng tôi làm điều này bằng cách đặt một dấu gạch chéo ngược ngay trước nhân vật. Thử cái này:

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

Điều này hoạt động tốt. Bạn có thể thoát khỏi các ký tự khác theo cùng một cách, ví dụ:

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

Dây nối

Concatenate chỉ có nghĩa là "tham gia cùng nhau". Để kết hợp các chuỗi với nhau trong JavaScript, bạn có thể sử dụng một loại chuỗi khác, được gọi là một mẫu theo nghĩa đen.

Một mẫu theo nghĩa đen trông giống như một chuỗi bình thường, nhưng thay vì sử dụng dấu ngoặc đơn hoặc kép (

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Điều này có thể hoạt động giống như một chuỗi bình thường, ngoại trừ bạn có thể bao gồm các biến trong đó, được bọc bên trong

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Bạn có thể sử dụng cùng một kỹ thuật để kết hợp với nhau hai biến:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Concatenation trong bối cảnh

Chúng ta hãy xem kết nối đang được sử dụng trong hành động:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Ở đây chúng tôi đang sử dụng chức năng

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

Sự kết hợp bằng cách sử dụng "+"

Bạn cũng có thể kết hợp các chuỗi bằng toán tử

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Tuy nhiên, các mẫu chữ thường cung cấp cho bạn mã dễ đọc hơn:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Số so với chuỗi

Vậy điều gì xảy ra khi chúng ta cố gắng kết hợp một chuỗi và một số? Hãy thử nó trong bảng điều khiển của chúng tôi:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

Bạn có thể mong đợi điều này sẽ trả về một lỗi, nhưng nó hoạt động tốt. Cố gắng biểu diễn một chuỗi dưới dạng một số không thực sự có ý nghĩa, nhưng biểu thị một số dưới dạng chuỗi, vì vậy trình duyệt chuyển đổi số thành một chuỗi và kết hợp hai chuỗi.

Nếu bạn có một biến số mà bạn muốn chuyển đổi thành một chuỗi nhưng không thay đổi hoặc một biến chuỗi mà bạn muốn chuyển đổi thành một số nhưng không thay đổi khác, bạn có thể sử dụng hai cấu trúc sau:

• Đối tượng

  const badString = string;
  console.log(badString);
  

  0 chuyển đổi bất cứ thứ gì được chuyển cho nó thành một số, nếu nó có thể. Hãy thử những điều sau:

  #logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"
  

  8

• Ngược lại, mỗi số có một phương thức gọi là

  const badString = string;
  console.log(badString);
  

  1 chuyển đổi nó thành chuỗi tương đương. Thử cái này:

  #logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"
  

  9

Những cấu trúc này có thể thực sự hữu ích trong một số tình huống. Ví dụ: nếu người dùng nhập một số vào trường văn bản của biểu mẫu, thì đó là một chuỗi. Tuy nhiên, nếu bạn muốn thêm số này vào một cái gì đó, bạn sẽ cần nó là một số, vì vậy bạn có thể chuyển nó qua

const badString = string;
console.log(badString);

Bao gồm các biểu thức trong chuỗi

Bạn có thể bao gồm các biểu thức JavaScript trong các chữ cái mẫu, cũng như các biến đơn giản và kết quả sẽ được đưa vào kết quả:

const string = "The revolution will not be televised.";
console.log(string);

Chuỗi đa dòng

Mẫu chữ viết tôn trọng dòng phá vỡ trong mã nguồn, vì vậy bạn có thể viết các chuỗi trải rộng nhiều dòng như thế này:

const string = "The revolution will not be televised.";
console.log(string);

Để có đầu ra tương đương bằng cách sử dụng chuỗi bình thường, bạn phải bao gồm các ký tự ngắt dòng (

const badString = string;
console.log(badString);

const string = "The revolution will not be televised.";
console.log(string);

Xem trang tham chiếu mẫu của chúng tôi để biết thêm các ví dụ và chi tiết về các tính năng nâng cao.

Sự kết luận

Vì vậy, đó là những điều cơ bản của các chuỗi được bao phủ trong JavaScript. Trong bài viết tiếp theo, chúng tôi sẽ xây dựng dựa trên điều này, xem xét một số phương thức tích hợp có sẵn cho các chuỗi trong JavaScript và cách chúng tôi có thể sử dụng chúng để thao tác các chuỗi của chúng tôi vào hình thức chúng tôi muốn.

• Trước
• Tổng quan: Các bước đầu tiên
• Tiếp theo

Trong mô -đun này