كيف يمكنني إجراء استيفاء السلسلة في JavaScript؟

Question

خذ بعين الاعتبار هذا الرمز:

var age = 3;

console.log("I'm " + age + " years old!");

هل هناك أي طرق أخرى لإدراج قيمة متغير في سلسلة، بصرف النظر عن تسلسل السلسلة؟

Answer 1

منذ ES6، يمكنك استخدام حرفية القالب:

let age = 3
console.log(`I'm ${age} years old!`)

ملاحظة. لاحظ استخدام backticks: ``.

Answer 2

ليرة تركية ؛ د

استخدم قالب سلسلة ECMAScript 2015 الحرفي، إن أمكن.

توضيح

لا توجد طريقة مباشرة للقيام بذلك، وفقًا لمواصفات ECMAScript 5، ولكن ECMAScript 6 لديها سلاسل القالب, ، والتي كانت تعرف أيضًا باسم شبه حرفية أثناء صياغة المواصفات.استخدمها مثل هذا:

> var n = 42;
undefined
> `foo${n}bar`
'foo42bar'

يمكنك استخدام أي تعبير JavaScript صالح داخل ملف {}.على سبيل المثال:

> `foo${{name: 'Google'}.name}bar`
'fooGooglebar'
> `foo${1 + 3}bar`
'foo4bar'

والشيء المهم الآخر هو أنه لا داعي للقلق بشأن السلاسل متعددة الأسطر بعد الآن.يمكنك كتابتها ببساطة كما

> `foo
...     bar`
'foo\n    bar'

ملحوظة: لقد استخدمت io.js v2.4.0 لتقييم جميع سلاسل القالب الموضحة أعلاه.يمكنك أيضًا استخدام أحدث إصدار من Chrome لاختبار الأمثلة الموضحة أعلاه.

ملحوظة: مواصفات ES6 هي تم الانتهاء منه الآن, ، ولكن لم يتم تنفيذها بعد بواسطة جميع المتصفحات الرئيسية.
بحسب ال صفحات شبكة مطوري موزيلا, سيتم تنفيذ ذلك للحصول على الدعم الأساسي بدءًا من الإصدارات التالية:فايرفوكس 34، كروم 41، إنترنت إكسبلورر 12.إذا كنت من مستخدمي Opera أو Safari أو Internet Explorer ولديك فضول بشأن هذا الأمر الآن، سرير الاختبار هذا يمكن استخدامها للتجول حتى يحصل الجميع على الدعم لذلك.

Answer 3

ودوغلاس كروكفورد في العلاجي جافا سكريبت يتضمن وظيفة String.prototype.supplant. أنها قصيرة، مألوفة، وسهلة الاستخدام:

String.prototype.supplant = function (o) {
    return this.replace(/{([^{}]*)}/g,
        function (a, b) {
            var r = o[b];
            return typeof r === 'string' || typeof r === 'number' ? r : a;
        }
    );
};

// Usage:
alert("I'm {age} years old!".supplant({ age: 29 }));
alert("The {a} says {n}, {n}, {n}!".supplant({ a: 'cow', n: 'moo' }));

إذا كنت لا ترغب في تغيير النموذج سلسلة، يمكنك التكيف دائما أن تكون قائمة بذاتها، أو وضعها في بعض أسماء أخرى، أو أيا كان.

Answer 4

وكلمة تحذير: تجنب أي نظام القالب الذي؛ أليس تسمح لك للهروب المحددات الخاصة بها. على سبيل المثال، لن يكون هناك أي وسيلة لإخراج التالية باستخدام طريقة supplant() المذكورة هنا.

<اقتباس فقرة>   

و"أنا بفضل 3 سنوات من العمر لبلدي {عمر} المتغير".

والاستيفاء بسيط قد تعمل للمخطوطات صغيرة مكتفية ذاتيا، ولكن غالبا ما يأتي مع هذا عيب تصميم من شأنها أن تحد من أي استخدام خطيرة. أنا بصراحة تفضل القوالب DOM، مثل:

<div> I am <span id="age"></span> years old!</div>

واستخدام مسج التلاعب: $('#age').text(3)

وبدلا من ذلك، إذا كنت ببساطة مجرد تعب من سلسلة سلسلة، وهناك دائما بديل جملة:

var age = 3;
var str = ["I'm only", age, "years old"].join(" ");

Answer 5

sprintf . على سبيل المثال:

vsprintf('The first 4 letters of the english alphabet are: %s, %s, %s and %s', ['a', 'b', 'c', 'd']);

Answer 6

هل يمكن استخدام نظام قالب النموذج في إذا كنت حقا تشعر مثل استخدام مطرقة ثقيلة ل كسر جوزة:

var template = new Template("I'm #{age} years old!");
alert(template.evaluate({age: 21}));

Answer 7

أستخدم هذا النمط في الكثير من اللغات عندما لا أعرف كيفية القيام بذلك بشكل صحيح بعد وأريد فقط الحصول على فكرة بسرعة:

// JavaScript
var stringValue = 'Hello, my name is {name}. You {action} my {relation}.'
    .replace(/{name}/g    ,'Indigo Montoya')
    .replace(/{action}/g  ,'killed')
    .replace(/{relation}/g,'father')
    ;

على الرغم من أنها ليست فعالة بشكل خاص، إلا أنني أجدها قابلة للقراءة.إنه يعمل دائمًا، وهو متاح دائمًا:

' VBScript
dim template = "Hello, my name is {name}. You {action} my {relation}."
dim stringvalue = template
stringValue = replace(stringvalue, "{name}"    ,"Luke Skywalker")     
stringValue = replace(stringvalue, "{relation}","Father")     
stringValue = replace(stringvalue, "{action}"  ,"are")

دائماً

* COBOL
INSPECT stringvalue REPLACING FIRST '{name}'     BY 'Grendel'
INSPECT stringvalue REPLACING FIRST '{relation}' BY 'Mother'
INSPECT stringvalue REPLACING FIRST '{action}'   BY 'did unspeakable things to'

Answer 8

ويمكنك القيام بذلك بسهولة باستخدام ES6 template string وtranspile إلى ES5 باستخدام أي transpilar المتاحة مثل بابل.

const age = 3;

console.log(`I'm ${age} years old!`);

http://www.es6fiddle.net/im3c3euc/

Answer 9

يحاول كيوي, ، وحدة جافا سكريبت خفيفة الوزن لاستكمال السلسلة.

يمكنك ان تفعل

Kiwi.compose("I'm % years old!", [age]);

أو

Kiwi.compose("I'm %{age} years old!", {"age" : age});

Answer 10

وهنا الحل الذي يتطلب منك تقديم كائن مع القيم. إذا كنت لا توفر كائن كمعلمة، وسوف الافتراضي إلى استخدام المتغيرات العالمية. ولكن أفضل عصا لاستخدام المعلمة، انها أنظف بكثير.

String.prototype.interpolate = function(props) {
    return this.replace(/\{(\w+)\}/g, function(match, expr) {
        return (props || window)[expr];
    });
};

// Test:

// Using the parameter (advised approach)
document.getElementById("resultA").innerText = "Eruption 1: {eruption1}".interpolate({ eruption1: 112 });

// Using the global scope
var eruption2 = 116;
document.getElementById("resultB").innerText = "Eruption 2: {eruption2}".interpolate();

<div id="resultA"></div><div id="resultB"></div>

Answer 11

واستخدام ` ( هجات الخطيرة التي تعرف أيضا باسم الفاصلة العليا المائلة ) بدلا من اقتباس مفردة (') أو الاقتباس المزدوجة (") والدولار / قوس علامة ${ variable }

وعلى سبيل المثال:

console.log(
  `current date: ${new Date()}`
);

اقرأ المزيد عن القالب الحرفية هنا .

Answer 12

إذا كنت تريد أن أقحم في الناتج console.log، ثم فقط

console.log("Eruption 1: %s", eruption1);
                         ^^

وهنا، %s هو ما يسمى "شكل محدد". console.log لديها هذا النوع من الدعم الداخلي مدمجة.

Answer 13

والتوسع في الجواب الثاني جريج كيندل، يمكنك كتابة دالة للقضاء على بعض النمطي:

var fmt = {
    join: function() {
        return Array.prototype.slice.call(arguments).join(' ');
    },
    log: function() {
        console.log(this.join(...arguments));
    }
}

والاستعمال:

var age = 7;
var years = 5;
var sentence = fmt.join('I am now', age, 'years old!');
fmt.log('In', years, 'years I will be', age + years, 'years old!');

Answer 14

وأنا يمكن أن تظهر لك مثالا على ذلك:

function fullName(first, last) {
  let fullName = first + " " + last;
  return fullName;
}

function fullNameStringInterpolation(first, last) {
  let fullName = `${first} ${last}`;
  return fullName;
}

console.log('Old School: ' + fullName('Carlos', 'Gutierrez'));

console.log('New School: ' + fullNameStringInterpolation('Carlos', 'Gutierrez'));

Answer 15

ومنذ ES6، إذا كنت تريد أن تفعل الاستيفاء سلسلة في مفاتيح الكائن، ستحصل على SyntaxError: expected property name, got '${' إذا كنت تفعل شيئا مثل:

let age = 3
let obj = { `${age}`: 3 }

ويتعين عليك أن تفعل ما يلي بدلا من ذلك:

let obj = { [`${age}`]: 3 }

Answer 16

وعن طريق تركيب قالب فشل في المتصفحات القديمة، من المهم إذا كنت تقوم بإنشاء HTML للاستخدام العام. عن طريق سلسلة غير مملة وصعبة القراءة، لا سيما إذا كان لديك العديد من التعبيرات أو طويلة، أو إذا كان يجب استخدام الأقواس للتعامل مع خليط من عدد وسلسلة وحدات (كلاهما استخدام عامل التشغيل +).

وPHP يوسع سلاسل نقلت تحتوي على المتغيرات وحتى بعض العبارات باستخدام منهج مضغوط جدا: $a="the color is $color";

في جافا سكريبت، وظيفة فعالة يمكن أن تكون مكتوبة لدعم هذا: var a=S('the color is ',color);، وذلك باستخدام عدد متغير من الوسائط. في حين ليس هناك ميزة على سلسلة في هذا المثال، عند الحصول على تعبيرات أطول بناء الجملة هذا قد يكون أكثر وضوحا. أو يمكن للمرء أن استخدام علامة الدولار للإشارة إلى بداية تعبير باستخدام وظيفة جافا سكريبت، كما هو الحال في PHP.

وعلى الجانب الآخر، كتابة وظيفة الحل فعالة لتوفير توسع قالب مثل سلاسل للالمتصفحات القديمة لن يكون من الصعب. شخص ما ربما قد فعلت ذلك بالفعل.

وأخيرا، وأتصور أن sprintf (كما في C، C ++، وPHP) يمكن أن تكون مكتوبة في جافا سكريبت، على الرغم من أنه سيكون قليلا أقل كفاءة من هذه الحلول الأخرى.

Answer 17

استبدال المزيد ل ES6 نسخة من مشاركة @Chris Nielsen.

String.prototype.supplant = function (o) {
  return this.replace(/\${([^\${}]*)}/g,
    (a, b) => {
      var r = o[b];
      return typeof r === 'string' || typeof r === 'number' ? r : a;
    }
  );
};

string = "How now ${color} cow? {${greeting}}, ${greeting}, moo says the ${color} cow.";

string.supplant({color: "brown", greeting: "moo"});
=> "How now brown cow? {moo}, moo, moo says the brown cow."