জাভাস্ক্রিপ্টের স্ট্রিংগুলিতে কীভাবে বিন্দু বিন্যাস ছাড়াই ভেরিয়েবলগুলি ইন্টারপোলেট করবেন?


408

আমি পিএইচপি-তে জানি আমরা এরকম কিছু করতে পারি:

$hello = "foo";
$my_string = "I pity the $hello";

আউটপুট: "I pity the foo"

আমি ভাবছিলাম যে একই জিনিসটি জাভাস্ক্রিপ্টেও সম্ভব কিনা। স্ট্রিংয়ের ভিতরে ভ্যারিয়েবলগুলি কনট্যাক্টেশন ব্যবহার না করে ব্যবহার করা - এটি লেখার জন্য আরও সংক্ষিপ্ত এবং মার্জিত দেখায়।

উত্তর:


694

আপনি টেম্পলেট লিটারালগুলির সুবিধা নিতে পারেন এবং এই বাক্য গঠনটি ব্যবহার করতে পারেন :

`String text ${expression}`

টেম্পলেট লিটারালগুলি ডাবল বা একক উদ্ধৃতিগুলির পরিবর্তে ব্যাক-টিক (grave `) (গুরুতর উচ্চারণ) দ্বারা আবদ্ধ ।

এই বৈশিষ্ট্যটি ES2015 (ES6) এ চালু করা হয়েছে।

উদাহরণ

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b}.`);
// "Fifteen is 15.

এটা কত ঝরঝরে?

বোনাস:

এটি জাভাস্ক্রিপ্টে বহির্গমন ছাড়াই মাল্টি-লাইন স্ট্রিংয়ের অনুমতি দেয় যা টেমপ্লেটগুলির জন্য দুর্দান্ত:

return `
    <div class="${foo}">
         ...
    </div>
`;

ব্রাউজার সমর্থন :

যেহেতু এই বাক্য গঠনটি পুরানো ব্রাউজারগুলি (বেশিরভাগ ইন্টারনেট এক্সপ্লোরার) দ্বারা সমর্থিত নয়, আপনি এটি কোথাও চলবে তা নিশ্চিত করার জন্য আপনার কোডটি ইএস 5 এ স্থানান্তর করতে বাবেল / ওয়েবপ্যাকটি ব্যবহার করতে চাইতে পারেন ।


সাইড নোট:

আইই 8 + থেকে শুরু করে আপনি ভিতরে বেসিক স্ট্রিং ফর্ম্যাটিং ব্যবহার করতে পারেন console.log:

console.log('%s is %d.', 'Fifteen', 15);
// Fifteen is 15.

56
আপনার সাধারণ উদ্ধৃতি অক্ষরের পরিবর্তে টেম্পলেট স্ট্রিংটি ব্যাক টিক্স (`) দিয়ে সীমাবদ্ধ করা হয়েছে তা মিস করবেন না। "${foo}"আক্ষরিক অর্থে $ {foo `${foo}`
you

1
এছাড়াও সামঞ্জস্যতার সমস্যাটি স্থির করতে অনেকগুলি ট্রান্সিলার ES6 কে ES5 তে পরিণত করতে হবে!
নিক

যখন আমি a বা b এর মান পরিবর্তন করি। কনসোল.লগ ( Fifteen is ${a + b}.); গতিশীল পরিবর্তন হয় না। এটা সবসময় পনেরো 15 দেখায়
Dharan

168

এর আগে ফায়ারফক্স 34 / ক্রোম 41 / সাফারি 9 / মাইক্রোসফট এজ নাঃ, যে জাভাস্ক্রিপ্ট সম্ভব ছিল না। আপনাকে অবলম্বন করতে হবে:

var hello = "foo";
var my_string = "I pity the " + hello;

2
টেম্পলেট স্ট্রিং সহ এটি শীঘ্রই জাভাস্ক্রিপ্টে (ES6) সম্ভব হবে, নীচে আমার বিস্তারিত উত্তরটি দেখুন।
bformet

আপনি যদি কফিস্ক্রিপ্ট লিখতে চান তবে এটি সম্ভবত আরও ভাল বাক্য গঠন সহ জাভাস্ক্রিপ্ট IS
বোফর্মেট

1
পুরানো ব্রাউজারগুলির জন্য দুর্দান্ত চিৎকার :)
ক্রিস্টি মার্কস

1
আমি এফওওটির প্রতি করুণা করছি !!! এটি দুর্দান্ত
অ্যাডাম হিউজ

42

এর আগে ফায়ারফক্স 34 / ক্রোম 41 / সাফারি 9 / মাইক্রোসফট এজ, কোন। যদিও আপনি জাভাস্ক্রিপ্টের জন্য অর্ধেকের জন্য এখানে স্প্রিন্টফ চেষ্টা করতে পারেন:

var hello = "foo";
var my_string = sprintf("I pity the %s", hello);

ধন্যবাদ। আপনি যদি ডোজো ব্যবহার করছেন তবে স্প্রিন্টফ
১.৯

32

ভাল আপনি এটি করতে পারে, কিন্তু এটি সাধারণ হয় না

'I pity the $fool'.replace('$fool', 'fool')

আপনি খুব সহজেই এমন একটি ফাংশন লিখতে পারেন যা এটি বুদ্ধিমানের সাথে করতে পারে যদি আপনার সত্যিই প্রয়োজন হয়


বেশ সুন্দর, আসলে।
মিঃ বি

1
এই উত্তরটি ভাল যখন আপনার ডাটাবেসে টেম্পলেট স্ট্রিং সঞ্চয় করতে হবে এবং এটির চাহিদা অনুসারে প্রক্রিয়া করা দরকার
Dima Escaroda

ভাল এক, এটি ভাল কাজ করে। খুব সহজ তবে মনে আসেনি।
স্যাম

13

সম্পূর্ণ উত্তর, ব্যবহারের জন্য প্রস্তুত:

 var Strings = {
        create : (function() {
                var regexp = /{([^{]+)}/g;

                return function(str, o) {
                     return str.replace(regexp, function(ignore, key){
                           return (key = o[key]) == null ? '' : key;
                     });
                }
        })()
};

যেমন কল

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'});

স্ট্রিং.প্রোটোটাইপ এ এটি সংযুক্ত করতে:

String.prototype.create = function(o) {
           return Strings.create(this, o);
}

তারপরে ব্যবহার করুন:

"My firstname is ${first}".create({first:'Neo'});

10

এই ধরণের টেম্প্লেটিং করতে আপনি এই জাভাস্ক্রিপ্ট ফাংশনটি ব্যবহার করতে পারেন। পুরো লাইব্রেরি অন্তর্ভুক্ত করার দরকার নেই।

function createStringFromTemplate(template, variables) {
    return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){
        return variables[varName];
    });
}

createStringFromTemplate(
    "I would like to receive email updates from {list_name} {var1} {var2} {var3}.",
    {
        list_name : "this store",
        var1      : "FOO",
        var2      : "BAR",
        var3      : "BAZ"
    }
);

আউটপুট :"I would like to receive email updates from this store FOO BAR BAZ."

স্ট্রিং.রেপ্লেস () ফাংশনের আর্গুমেন্ট হিসাবে কোনও ফাংশন ব্যবহার করা ECMAScript v3 স্পপের অংশ ছিল। দেখুন এই তাই উত্তর আরো বিস্তারিত জানার জন্য।


এটা কি দক্ষ?
মিমি

দক্ষতা মূলত ব্যবহারকারীর ব্রাউজারের উপর নির্ভর করবে, যেহেতু এই সমাধানটি রেজিক্সের সাথে মিলে যাওয়া এবং ব্রাউজারের নেটিভ ফাংশনে স্ট্রিং প্রতিস্থাপনের "ভারী উত্তোলন" প্রতিনিধিত্ব করে। যাই হোক না কেন, যেহেতু ব্রাউজারের দিক থেকে এটি ঘটছে, দক্ষতা এত বড় উদ্বেগ নয়। আপনি যদি সার্ভার-সাইড টেম্প্লেটিং করতে চান (নোড.জেএস বা এর মতো) আপনার সম্ভবত @bformet দ্বারা বর্ণিত ES6 টেম্পলেট লিটারাল সমাধান ব্যবহার করা উচিত কারণ এটি সম্ভবত আরও দক্ষ efficient
এরিক সিস্ট্র্যান্ড

9

আপনি যদি কফিস্ক্রিপ্ট লিখতে চান তবে আপনি এটি করতে পারেন:

hello = "foo"
my_string = "I pity the #{hello}"

কফিস্ক্রিপ্ট আসলে জাভাস্ক্রিপ্ট, তবে আরও ভাল সিনট্যাক্স সহ।

কফিস্ক্রিপ্টের ওভারভিউয়ের জন্য এই শিক্ষানবিসের গাইডটি পরীক্ষা করে দেখুন ।



3

আমি এই এনপিএম প্যাকেজ স্ট্রিংনজেক্টটি https://www.npmjs.com/package/stringinject লিখেছি যা আপনাকে নিম্নলিখিতটি করতে অনুমতি দেয়

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]);

যা অ্যারে আইটেমগুলির সাথে {0} এবং {1 replace প্রতিস্থাপন করবে এবং নিম্নলিখিত স্ট্রিংটি ফিরিয়ে দেবে

"this is a test string for stringInject"

অথবা আপনি স্থানধারকগুলিকে এই জাতীয় বস্তু কী এবং এর সাথে মানগুলি প্রতিস্থাপন করতে পারেন:

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" });

"My username is tjcafferkey on Github" 

3

আমি ব্যাক-টিক would use ব্যবহার করব `

let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'

আপনি জানেন না তবে আপনি name1কখন তৈরি করবেন msg1

উদাহরণস্বরূপ যদি msg1কোনও এপিআই থেকে আসে।

তুমি ব্যবহার করতে পার :

let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'

const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
    return eval(key);
});
console.log(result); // 'Hello Geoffrey'

এটি ${name2}তার মান সঙ্গে প্রতিস্থাপন করা হবে ।


2

এখানে উল্লিখিত কোনও বাহ্যিক গ্রন্থাগার দেখতে পাবেন না, তবে লোডাশ রয়েছে _.template(),

https://lodash.com/docs/4.17.10#template

আপনি যদি ইতিমধ্যে লাইব্রেরিটি ব্যবহার করে থাকেন তবে এটি চেক করা উচিত, এবং যদি আপনি লোডাশ ব্যবহার না করেন তবে আপনি সর্বদা এনপিএম থেকে চেরি চয়ন পদ্ধতিগুলি npm install lodash.templateকরতে পারেন যাতে আপনি ওভারহেডটি কেটে ফেলতে পারেন।

সরলতম গঠন -

var compiled = _.template('hello <%= user %>!');
compiled({ 'user': 'fred' });
// => 'hello fred!'

এছাড়াও কনফিগারেশন অপশনগুলির একটি গুচ্ছ রয়েছে -

_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// => 'hello mustache!'

আমি কাস্টম ডিলিমিটারগুলিকে সবচেয়ে আকর্ষণীয় বলে মনে করেছি।


0

String.format()জাভার অনুরূপ একটি পদ্ধতি তৈরি করুন

StringJoin=(s, r=[])=>{
  r.map((v,i)=>{
    s = s.replace('%'+(i+1),v)
  })
return s
}

ব্যবহার

console.log(StringJoin('I can %1 a %2',['create','method'])) //output: 'I can create a method'

0

2020 এর শান্তির উক্তি:

Console.WriteLine("I {0} JavaScript!", ">:D<");

console.log(`I ${'>:D<'} C#`)


-1
String.prototype.interpole = function () {
    var c=0, txt=this;
    while (txt.search(/{var}/g) > 0){
        txt = txt.replace(/{var}/, arguments[c]);
        c++;
    }
    return txt;
}

Uso:

var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"

-2

var hello = "foo";

var my_string ="I pity the";

কনসোল.লগ (আমার_সামান্য, হ্যালো)


1
যে প্রশ্নের উত্তর দেয় না। আপনি উভয় স্ট্রিংকে এক লাইনে লগ আউট করতে পারেন, তবে এটি আপনাকে উভয় স্ট্রিং যুক্ত একটি নতুন স্ট্রিং দেয় না, যা ওপি চেয়েছে।
ম্যাক্স ভলমার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.