javascript - شرح - ملفات جافا سكريبت




كيف أقوم بإجراء الحرف الأول من سلسلة أحرف كبيرة في JavaScript؟ (20)

CSS فقط

p::first-letter {
  text-transform: uppercase;
}
  • على الرغم ::first-letter تسميته ::first-letter ، فإنه ينطبق على الحرف الأول ، أي في حالة string %a ، فإن هذا المحدد سينطبق على % وبالتالي لن يتم تكبيره.
  • في IE9 + أو IE5.5 + يتم دعمه في التدوين القديم مع نقطتين واحدتين فقط ( :first-letter ).

ES2015 واحد الخطوط الملاحية المنتظمة

نظرًا لوجود العديد من الإجابات ، ولكن لا توجد إجابات في ES2015 من شأنها حل المشكلة الأصلية بكفاءة ، فقد توصلت إلى ما يلي:

const capitalizeFirstChar = str => str.charAt(0).toUpperCase() + str.substring(1);

ملاحظات

  • parameters => function تسمى وظيفة السهم .
  • ذهبت مع اسم capitalizeFirstChar بدلا من capitalizeFirstLetter ، لأن OP لم يطلب الرمز الذي يستثمر الحرف الأول في السلسلة بأكملها ، ولكن الحرف الأول (إذا كان حرف ، بالطبع).
  • يعطينا const القدرة على إعلان capitalizeFirstChar ثابت ، والذي هو المطلوب منذ كمبرمج يجب عليك دائما صراحة نواياك.
  • في المعيار الذي قمت به لم يكن هناك فرق كبير بين string.charAt(0) و string[0] . لاحظ مع ذلك ، أن string[0] قد تكون undefined لسلسلة فارغة ، لذا يجب إعادة كتابتها إلى string && string[0] ، وهي طريقة مطولة جدًا مقارنة بالبديل.
  • string.substring(1) أسرع من string.slice(1) .

المعيار

  • 4،956،962 ops / s ± 3.03٪ لهذا الحل ،
  • 4،577،946 ops / s ± 1.2٪ للإجابة الأكثر تصويتًا.
  • تم إنشاؤها باستخدام JSBench.me على Google Chrome 57.

كيف أقوم بإجراء الحرف الأول من سلسلة أحرف كبيرة ، ولكن لا يمكنني تغيير حالة أي حرف آخر؟

فمثلا:

  • "this is a test" -> "This is a test"
  • "the Eiffel Tower" -> "The Eiffel Tower"
  • "/index.html" -> "/index.html"

إذا كنت مهتمًا بأداء بعض الطرق المختلفة المنشورة:

فيما يلي أسرع الطرق استنادًا إلى اختبار jsperf هذا (يُطلب من أسرع إلى أبطأ).

كما ترون ، فإن الطريقتين الأوليتين يمكن String.prototype بشكل أساسي من حيث الأداء ، في حين أن تغيير String.prototype هو الأبطأ من حيث الأداء.

// 10,889,187 operations/sec
function capitalizeFirstLetter(string) {
    return string[0].toUpperCase() + string.slice(1);
}

// 10,875,535 operations/sec
function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

// 4,632,536 operations/sec
function capitalizeFirstLetter(string) {
    return string.replace(/^./, string[0].toUpperCase());
}

// 1,977,828 operations/sec
String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}


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

function capitalize (text) {
    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
}

سيضمن هذا تغيير النص التالي:

TEST => Test
This Is A TeST => This is a test

إذا كنت تستخدم underscore.js أو Lo-Dash ، توفر مكتبة underscore.string امتدادات السلاسل ، بما في ذلك الكتابة بالأحرف الكبيرة:

_.capitalize (string) يحول الحرف الأول من السلسلة إلى أحرف كبيرة.

مثال:

_.capitalize("foo bar") == "Foo bar"

تكبير الحرف الأول من كل الكلمات في سلسلة:

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1);
    }
    return pieces.join(" ");
}

في CSS:

p:first-letter {
    text-transform:capitalize;
}

فيما يلي دالة تسمى ucfirst () (اختصار لـ "الحرف الأول من الحالة العليا"):

function ucfirst(str) {
    var firstLetter = str.substr(0, 1);
    return firstLetter.toUpperCase() + str.substr(1);
}

يمكنك الاستفادة من سلسلة من خلال الاتصال بـ ucfirst ("بعض السلسلة") - على سبيل المثال ،

ucfirst("this is a test") --> "This is a test"

يعمل عن طريق تقسيم السلسلة إلى قسمين. في السطر الأول ، يتم سحبه أولاً ، ثم في السطر الثاني يقوم بتكبير أول حرف من خلال استدعاء firstLetter.toUpperCase () وينضم إليه مع باقي السلسلة ، التي يتم العثور عليها عن طريق استدعاء str.substr (1) .

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


نهج أكثر المنحى وجوه:

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

وثم:

"hello world".capitalize();  =>  "Hello world" 

يمكن أن نحصل على الشخصية الأولى مع أحد برامج RegExp المفضلة ، يبدو مثل ابتسامة لطيفة: /^./

String.prototype.capitalize = function () {
  return this.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

ولجميع المدمنين على القهوة:

String::capitalize = ->
  @replace /^./, (match) ->
    match.toUpperCase()

... وبالنسبة لجميع الرجال الذين يعتقدون أن هناك طريقة أفضل للقيام بذلك ، دون تمديد النماذج الأصلية:

var capitalize = function (input) {
  return input.replace(/^./, function (match) {
    return match.toUpperCase();
  });
};

فيما يلي أفضل الحلول:

الحل الأول في CSS:

p {
  text-transform: capitalize;
}

الحل الثاني :

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase();
}

يمكنك أيضًا إضافته إلى String.prototype حتى String.prototype من String.prototype بطرق أخرى:

String.prototype.capitalizeFirstLetter = function() {
    return this.charAt(0).toUpperCase() + this.slice(1).toLowerCase();
}

واستخدامها على هذا النحو:

'string'.capitalizeFirstLetter() // String

الحل الثالث :

function ucFirstAllWords( str )
{
    var pieces = str.split(" ");
    for ( var i = 0; i < pieces.length; i++ )
    {
        var j = pieces[i].charAt(0).toUpperCase();
        pieces[i] = j + pieces[i].substr(1).toLowerCase();
    }
    return pieces.join(" ");
}

الخروج من هذا الحل:

var stringVal = 'master';
stringVal.replace(/^./, stringVal[0].toUpperCase()); // returns Master 

يمكنك القيام بذلك في سطر واحد مثل هذا

string[0].toUpperCase() + string.substring(1)

من الأفضل دائمًا التعامل مع هذه الأنواع من المواد باستخدام CSS أولاً ، بشكل عام ، إذا كان بإمكانك حل شيء ما باستخدام CSS ، فانتقل أولاً إلى ذلك ، ثم جرّب جافا سكريبت لحل مشكلاتك ، لذلك حاول استخدام :first-letterCSS في CSS وتطبقtext-transform:capitalize;

لذا حاول إنشاء الفصل لذلك ، حتى تتمكن من استخدامه على مستوى العالم ، على سبيل المثال: .first-letter-uppercaseوإضافة شيء مثل أدناه في CSS:

.first-letter-uppercase:first-letter {
    text-transform:capitalize;
}

كما أن الخيار البديل هو JavaScript ، لذا سيكون أفضل شيء كالتالي:

function capitalizeTxt(txt) {
  return txt.charAt(0).toUpperCase() + txt.slice(1); //or if you want lowercase the rest txt.slice(1).toLowerCase();
}

وأطلق عليه اسم:

capitalizeTxt('this is a test'); // return 'This is a test'
capitalizeTxt('the Eiffel Tower'); // return 'The Eiffel Tower'
capitalizeTxt('/index.html');  // return '/index.html'

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

String.prototype.capitalizeTxt = String.prototype.capitalizeTxt || function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
}

وندعوها على النحو التالي:

'this is a test'.capitalizeTxt(); // return 'This is a test'
'the Eiffel Tower'.capitalizeTxt(); // return 'The Eiffel Tower'
'/index.html'.capitalizeTxt();  // return '/index.html'

و ucfirstتعمل وظيفة إذا كنت تفعل ذلك من هذا القبيل.

function ucfirst(str) {
    var firstLetter = str.slice(0,1);
    return firstLetter.toUpperCase() + str.substring(1);
}

شكرا ج ب ل aclaration.


String.prototype.capitalize = function(){
    return this.replace( /(^|\s)([a-z])/g , function(m,p1,p2){ return p1+p2.toUpperCase();
    } );
};

الاستعمال:

capitalizedString = someString.capitalize();

هذه سلسلة نصية => هذه سلسلة نصية


String.prototype.capitalize = function(allWords) {
   return (allWords) ? // if all words
      this.split(' ').map(word => word.capitalize()).join(' ') : //break down phrase to words then  recursive calls until capitalizing all words
      this.charAt(0).toUpperCase() + this.slice(1); // if allWords is undefined , capitalize only the first word , mean the first char of the whole string
}

وثم:

 "capitalize just the first word".capitalize(); ==> "Capitalize just the first word"
 "capitalize all words".capitalize(true); ==> "Capitalize All Words"

تحديث Nov.2016 (ES6) ، فقط للمتعة:

const capitalize = (string = '') => [...string].map(    //convert to array with each item is a char of string by using spread operator (...)
    (char, index) => index ? char : char.toUpperCase()  // index true means not equal 0 , so (!index) is the first char which is capitalized by `toUpperCase()` method
 ).join('')                                             //return back to string

ثم capitalize("hello") // Hello


function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

تقوم بعض الإجابات الأخرى بتعديل String.prototype (هذه الإجابة المستخدمة أيضًا) ، ولكني أنصح بعدم وجود هذا الآن بسبب إمكانية الصيانة (من الصعب معرفة مكان إضافة الوظيفة إلى prototype وقد تتسبب في حدوث تعارضات إذا كانت الشفرة الأخرى تستخدم نفس الشيء) اسم / متصفح يضيف وظيفة أصلية بنفس الاسم في المستقبل).


var capitalized = yourstring[0].toUpperCase() + yourstring.substr(1);

var str = "test string";
str = str.substring(0,1).toUpperCase() + str.substring(1);

var string = "hello world";
string = string.charAt(0).toUpperCase() + string.slice(1);
alert(string);




letter