جدول محتوایی
تولید رشته تصادفی (Random string) در جاوا اسکریپت
گاهی اوقات، برنامه نویسان نیاز به ایجاد رشته ای دارند که با انتخاب کاراکترهای تصادفی ایجاد می شود. مولد رشته تصادفی جاوا اسکریپت، با انتخاب تصادفی تعدادی کاراکتر به ایجاد یک رشته تصادفی کمک می کند. این رشته می تواند یک رشته کاراکتر ساده یا یک رشته عددی الفبا باشد.
در این فصل، روش های مختلف برای ایجاد یک مولد رشته تصادفی را دریافت خواهید کرد.
ما یک برنامه تولید رشته تصادفی با استفاده از زبان برنامه نویسی جاوا اسکریپت برای تولید یک رشته تصادفی ایجاد خواهیم کرد.هر بار این مولد یک رشته جدید تولید می کند. برای این کار از تابع Math.random جاوا اسکریپت استفاده می کنیم.
پیش از ادامه ی مقاله ، در صورت نیاز به هاست وردپرس به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
استفاده از مولد رشته تصادفی جاوا اسکریپت
بیشتر اوقات، کد captcha را در فرم های وب مشاهده کرده اید که باید قبل از ارسال فرم برای تأیید ربات کاربران وارد شود.
مولد رشته تصادفی جاوا اسکریپت به شما کمک می کند تا این کد captcha را برای برنامه نویسان ایجاد کنید. امروزه به طور گسترده ای در فرم های وب برای اهداف امنیتی استفاده می شود.
به یاد داشته باشید که کد captcha شامل دنباله ای از کاراکترهای تصادفی است. این دنباله می تواند ترکیبی از نویسه های الفبایی یا نویسه های الفبا عددی باشد.
انواع مولد های رشته ی تصادفی
دو نوع مولد رشته تصادفی را در این مقاله خواهید دید:
- رشته تصادفی ساده
- رشته عددی تصادفی
ما این دو نوع مولد رشته را داریم. در نوع اول از مولد رشته تصادفی، ما یک برنامه جاوا اسکریپت از ژنراتور رشته تصادفی ایجاد خواهیم کرد که فقط رشته الفبا را تولید می کند.
از طرف دیگر، در نوع دوم مولد رشته، ما یک برنامه جاوا اسکریپت برای تولید رشته های الفا عددی تصادفی ایجاد می کنیم. نمونه‌های هر دو مولد رشته را با جزئیات ببینید.
تولید رشته تصادفی ساده
در این بخش، ما یک برنامه برای تولید یک رشته تصادفی ایجاد خواهیم کرد:
روش اول:
این روش با انتخاب چند کاراکتر به صورت تصادفی با طول مشخص شده، یک رشته تصادفی ساده ایجاد می کنیم. مراحل زیر را دنبال کنید:
- یک تابع تعریف شده توسط کاربر ایجاد کنید و یک متغیر تعریف کنید که تمام الفبای انگلیسی را با حروف کوچک و بزرگ داشته باشد.
- طول رشته تصادفی جدیدی که باید تولید شود را تعریف کنید.
- یک متغیر خالی جدید (var randomstring = ”;) برای نگه داشتن رشته تولید شده اعلام کنید.
- اکنون، رشته را با استفاده از حلقه for عبور دهید. در طول هر تکرار یک کاراکتر جدید ایجاد می کند.
- در داخل این حلقه، از متد Math.random() جاوا اسکریپت برای تولید یک کاراکتر تصادفی از متغیر رشته مشخص شده (A-Z, a-z) با محاسبه یک شاخص تصادفی استفاده کنید.
- متد floor() برای گرد کردن مقدار. این به عنوان Math.floor(Math.random() * characters.length) استفاده خواهد شد.
مراحل بالا را در اجرای واقعی کد تبدیل کنید تا نتیجه را ببینید. به کد جاوا اسکریپت زیر نگاه کنید:
<html>
<head>
<title> Random String Generator </title>
</head>
<script>
function randomString() {
//define a variable consisting alphabets in small and capital letter
var characters = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
//specify the length for the new string
var lenString = 7;
var randomstring = '';
//loop to select a new character in each iteration
for (var i=0; i<lenString; i++) {
var rnum = Math.floor(Math.random() * characters.length);
randomstring += characters.substring(rnum, rnum+1);
}
//display the generated string
document.getElementById("randomfield").innerHTML = randomstring;
}
</script>
<body>
<center>
<h2 style="color: green"> Random String Generator </h2>
<h3> Click the button to generate a random string </h3>
<form name="randomform">
<input type="button" value="Generate Random String" onClick="randomString();">
<br><br>
<b><p id="randomfield" style="color: green"> </p></b>
</form>
</center>
</body>
</html>
کد را در مرورگر خود اجرا کنید و همان نتیجه ای که در تصویر زیر داده شده است را دریافت می کنید:
خروجی 1
خروجی 2
روی این دکمه Generate Random String کلیک کنید تا یک رشته تصادفی برای شما ایجاد می کند:
خروجی 3
هر زمان که روی این دکمه کلیک کنید، الگویی از کاراکترهای تصادفی جدید (رشته تصادفی) به طول 7 حرف ایجاد می کند. تصویر زیر را ببینید:
رشته عددی تصادفی
دو روش زیر برای تولید یک رشته عددی تصادفی مورد بحث قرار گرفته است:
روش اول:
این رویکرد یک رشته عددی با طول مشخص ایجاد می کند. مراحل زیر را دنبال کنید:
- یک تابع تعریف شده توسط کاربر ایجاد کنید که شامل تمام مراحل زیر در داخل آن باشد.
- متغیری را تعریف کنید که همه کاراکترهای عددی الفا را با حروف کوچک و بزرگ و از 0 تا 9 داشته باشد، به عنوان مثال :
var alphaNumChars = “0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz”;.
3. طول رشته تصادفی جدیدی که باید تولید شود را تعریف کنید.
4. یک متغیر خالی جدید (var randomstring = ”;) برای نگه داشتن رشته جدید تولید شده تعیین کنید.
5. اکنون، رشته را با استفاده از حلقه for عبور دهید. در طول هر تکرار یک کاراکتر جدید ایجاد می کند.
6. در داخل این حلقه، از متد Math.random() جاوا اسکریپت برای انتخاب یک کاراکتر تصادفی از متغیر رشته مشخص شده (A-Z, a-z) با محاسبه یک شاخص تصادفی استفاده کنید.
7. متد floor() برای گرد کردن مقدار است. این متد به عنوان Math.floor(Math.random() * characters.length) استفاده خواهد شد.
مراحل بالا را در اجرای واقعی کد تبدیل کنید تا نتیجه را ببینید. به کد جاوا اسکریپت زیر نگاه کنید:
<html>
<head>
<title> Random String Generator </title>
</head>
<script>
function randomString() {
//initialize a variable having alpha-numeric characters
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
//specify the length for the new string to be generated
var string_length = 8;
var randomstring = '';
//put a loop to select a character randomly in each iteration
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
//display the generated string
document.getElementById("randomfield").innerHTML = randomstring;
}
</script>
<body>
<center>
<h2 style="color: green"> Random String Generator </h2>
<h3> Click the button to generate a random alpha-numeric string </h3>
<form name="randform">
<input type="button" value="Generate Alpha-numeric String" onClick="randomString();">
<br><br>
<h4 id="randomfield" style="color: green"> </h4>
</form>
</center>
</body>
</html>
کد را در مرورگر خود اجرا کنید و همان نتیجه ای که در تصویر زیر داده شده است را دریافت خواهید کرد:
خروجی 1
خروجی 2
روی این دکمه Generate Random String کلیک کنید تا رشته تصادفی برای شما ایجاد می کند:
خروجی 3
هر بار که روی این دکمه کلیک می کنید، دنباله جدیدی از کاراکترهای تصادفی (رشته تصادفی) برای شما ایجاد می کند. اسکرین شات زیر را ببینید:
روش دوم:
اکنون، ما روش دیگری برای تولید یک رشته عددی الفا با طول مشخص شده داریم. این یک رویکرد بسیار کوتاه برای تولید یک رشته تصادفی است. این نیازی به کد زیاد طولانی ندارد. در این روش، طول رشته جدید تولید شده را مشخص نمی کنیم. طول آن 10 یا 11 رشته جدید است.
برای ایجاد یک رشته عددی تصادفی، مراحل اولیه را دنبال کنید:
- یک تابع تعریف شده توسط کاربر ایجاد کنید که شامل تمام مراحل زیر در داخل آن است.
- ابتدا از متد random() برای تولید یک عدد تصادفی استفاده کنید.
- اکنون از متد داخلی جاوا اسکریپت toString(36) برای تبدیل پایه به 36 (26 کاراکتر + 0 به 9) استفاده می کنیم. این 36 کاراکتر دارای حروف الفبای عددی شامل 26 حروف الفبا و 0 تا 9 عدد است.
- در نهایت، از slice() برای بدست آوردن بخشی از رشته که از موقعیت 2 شروع شده است استفاده کنید.
مراحل بالا را در اجرای واقعی کد تبدیل کنید تا نتیجه را ببینید. به کد جاوا اسکریپت زیر نگاه کنید:
<html>
<head>
<title>
Generate random alpha-numeric string using JavaScript
</title>
</head>
<body>
<center>
<h2 style="color:green;"> Random String Generator </h2>
<h3> Click the button to generate random alpha-numeric string </h3>
<button onClick="random_String_Generator()"> Generate String </button>
<p id="random_String" style="color: green;
font-size: 22px; font-weight: bold;"> </p>
<script>
var result = document.getElementById('random_String');
function random_String_Generator() {
result.innerHTML = Math.random().toString(36).slice(2);
}
</script>
</center>
</body>
</html>
خروجی 1
فایل را ذخیره کنید و کد بالا را در مرورگر خود اجرا کنید. در ابتدا همان نتیجه ای را خواهید گرفت که در تصویر زیر نشان داده شده است:
خروجی 2
در اینجا، روی دکمه Generate String کلیک کنید تا رشته عددی تصادفی تولید شود و خروجی را ببینید:
خروجی 3
هر بار که روی دکمه Generate String کلیک می کنید، یک الگوی جدید ایجاد می کند. کلیک کنید و الگوهای رشته های عددی مختلف را بررسی کنید:
توجه داشته باشید:
در روش 1، می توانید طول (تعداد کاراکترها) را برای رشته تصادفی جدید تعریف کنید. ولی،
در روش 2، شما نمی توانید طول رشته جدیدی را که باید تولید شود، تعریف کنید. با توجه به نیاز خود از هر یک از این روش ها در وب سایت خود استفاده کنید.
و تمام! کار ما تمومه. در این مقاله به آموزش ایجاد مولد رشته تصادفی جاوا اسکریپت ساده و عددی به روش های ساده تا پیچیده پرداختیم. موفق باشید!