כיצד להשתמש ES6 תבניות תבנית ב - JavaScript

בתכנות, המונח “מילולי” מתייחס ל ציון ערכים בקוד. לדוגמה, אנו מזהים ערך מחרוזת עם מחרוזת מילולית כי הם תווים סגורים ציטוטים כפולים או יחיד ("foo", 'בר', "זה מחרוזת!").

מילולי תבנית הוצגו ב ECMAScript 6. הם פועלים די דומה מחרוזות מחרוזת; הם מייצרים ערכי תבנית ו ערכי תבנית גולמית, שתיהן מחרוזות.

עם זאת, שלא כמו מילולי מחרוזות, מילולי תבנית יכולים לייצר ערכים שהם מחרוזות מרובות שורות, משהו שאתה יכול להשיג בחוט מחרוזת רק על ידי הוספת תווים קו חדש (\ n).

תבניות מילוליות יכול גם ליצור מחרוזות עם ערכים אחרים (נגזר ביטויים) אשר אתה צריך להשתמש בתוספת מפעיל ב מחרוזת מילולי ("המזהה שלך הוא:" + idNo; איפה idNo הוא ביטוי משתנה עם ערך מספרי).

כל התכונות הללו להפוך את מיליארדי תבנית עדיף יותר ליצור ערכי מחרוזת.

תחביר של מילולי תבנית

התוואי של התבנית מילולית הוא backtick ' אופי (גם יודע כמו backquote אופי או סימן מבטא חמורה). ביטוי בתוך המילולי (שערכו הוא הערכה במהלך זמן ריצה הכלולים בערכו הסופי של המילולי) סוגריים מסולסלים עם סימן דולר הקודם $.

 'מחרוזת $ someExpression מחרוזת' 

הנה כמה דוגמאות של מילולי תבנית ייצור ללא שינוי, תחליף (ביטויים מוחלפים בערכים המוערכים שלהם) רב מרופדת מחרוזות.

 console.log ('hello'); // hell var name = "ג'ואן"; console.log ('hello $ name'); // שלום ג 'ואן console.log (' ג 'ואן היקרה, ברוכים הבאים.'); // ג'ואן היקרה, // ברוכים הבאים. 

Escapeing & ערכי תבנית גלם

בתבנית מילולית, ' (backtick), 12 (קו נטוי הפוך) ו $ (סימן דולר) תווים צריך להימלט משתמש ב תו לברוח 12 אם הם ייכללו בערך התבנית שלהם.

כברירת מחדל, כל רצפי הבריחה בתבנית מילולית הם התעלם. אם ברצונך לכלול אותו בפלט, עליך להשתמש בו ערך תבנית גולמית.

 ("קוד" in-line): "קוד" in-line: קוד "in-line" / hello $ name. console.log (String.raw'hello \ $ name. '); // שלום \ $ name. 

ה String.raw שיטה פלט ערכים גולמיים תבנית (צורת מחרוזת גלם של תבנית מילולית). בקוד לעיל, קריאה לפונקציה של גלם השיטה מכונה “תבנית מתויגת”.

שתייגת תבניות

תבנית מתויגת היא שיחת פונקציה איפה, במקום הסוגריים הרגילים (עם פרמטרים אופציונליים) מלבד שם הפונקציה, יש תבנית מילולית שממנו הפונקציה מקבל טיעונים שלה.

אז במקום לקרוא לפונקציה כזאת:

 foo (ArgumentsForFoo); 

זה נקרא כך:

 foo'ATemplateStringProvidingArgumentsForFoo '; 

הפונקציה foo נקרא א הפונקציה תג. הטיעון הראשון שקיבלה מהתבנית מילולית הוא מערך שנקרא אובייקט תבנית.

אובייקט התבנית (מערך) מחזיק כל ערכי המחרוזת לפרש את התבנית מילולית ויש לו גלם רכוש (מערך אחר) המחזיק כל ערכי מחרוזת הגלם (שלא נמלטו) לפרש מאותו מילולי.

בעקבות אובייקט התבנית, הארגומנטים של פונקציית התג כוללים כל ה העריך ערכים חיצוניים המופיעים באותיות מילוליות (אלה המצויות בסוגריים המסולסלים $ ).

בקוד שלהלן, foo הפונקציה נוצרת ל פלט את הארגומנטים שלה. לאחר מכן נקראת הפונקציה באופנה של התווית המתויגת, עם תבנית מילולית נושאת שתי ביטויים (שם ו id).

 var name = "John"; var id = 478; foo'hello $ name. המזהה שלך הוא: $ id. '; function foo () console.log (ארגומנטים [0]); // Array ["שלום", "המזהה שלך הוא:", "." ] console.log (ארגומנטים [1]); // John console.log (ארגומנטים [2]); // 478 

הארגומנט הראשון הוא פלט אובייקט תבנית נושאת את כל המיתרים לפרש מן התבנית מילולי, הטיעונים השני והשלישי הם ערכים משוערכים של הביטויים, שם ו id.

ה גלם נכס

כאמור, אובייקט התבנית כולל הנכס נקרא גלם שהוא מערך המכיל כל ערכי מחרוזת הגלם (שלא נמלטו) לפרש מן התבנית מילולי. כך אתה יכול לגשת גלם נכס:

 var name1 = "John", name2 = "Joan"; foo'hello \ $ name1, $ name2, כיצד אתם שניהם? '; function foo () console.log (ארגומנטים [0]); // Array ["שלום $ name1", ",", איך אתם שניכם? "] Console.log (ארגומנטים [0] .raw); // Array ["שלום \ $ name1", "," איך אתה שני? "] Console.log (ארגומנטים [1]); // Joan 

השתמש במקרים של תבניות מתויגות

שתייגת תבניות שימושיות כאשר אתה צריך לשבור מחרוזת לחלקים נפרדים כמו שזה קורה לעתים קרובות בכתובת אתר, או בזמן ניתוח שפה. תמצא אוסף של שתייגת דוגמאות לתבניות כאן.

מלבד IE, מילולי תבנית הם נתמך בכל הדפדפנים העיקריים.

להלן, תוכל למצוא כמה דוגמאות של פונקציות תג עם חתימות שונות המייצגים את הטיעונים:

 var name = "John"; foo'hello $ name, מה שלומך? '; bar'hello $ name, מה שלומך? '; function foo (... args) console.log (args); / Array [Array ["hello", "," "איך אתה שניכם?"], "John"] שורת תפקודים (strVals, ... exprVals) console.log (strVals); / / מערך ("שלום", "מה שלומך?" ] console.log (exprVals); // Array ["John"] 

בתוך ה בר פונקציה, הפרמטר הראשון (סרבאלס) האם ה אובייקט תבנית והשני (המשתמש בתחביר המרווח) הוא מערך שנאסף כל ערכי הביטוי המוערכים מן התבנית מילולית עברה לפונקציה.

שים את המחרוזת

אם אתה רוצה לקבל את כל המשפט (נגזר מילולי) בתוך הפונקציה תג, לשרשר את כל הערכים של המערכים הנושאים את מחרוזות התבנית ואת ערכי הביטוי המוערכים. ככה:

 (אם יש ביטויים כלשהם הכלולים במילולי אם (exprs.length! ==) var n = strs.length - 1, result = "; (var i = 0 ; אני < n; i++)  result += strs[i] + exprs[i];  result += strs[n]; console.log(result); //"Hello John."  // if there are no expressions included in the literal else console.log(strs[0]);  name = 'John'; foo'Hello $name.'; 

ה strs מחזיקה מערך כל המיתרים שנמצא במילולית ו exprs מחזיק כל ערכי הביטוי המוערכים מן המילולי.

אם אפילו ערך ביטוי אחד קיים שרשור כל ערך מערך של strs (למעט האחרון) עם אותו ערך המדד של exprs. לאחר מכן, בסוף, להוסיף את הערך האחרון של strs מערך למחרוזת מחורצת, ויצרו משפט שלם בדרך זו.